bump js-sdk -> 0.3.0 on the right branch

Merge pull request #25 from matrix-org/246-creating-room-state
Add creatingRoom state to know when to show a spinner.
2025-12-07 01:21:02 +00:00 · 2015-10-28 18:06:10 +00:00 · 2015-10-28 11:38:47 +00:00 · 2015-10-27 17:01:03 +00:00 · 2015-10-27 12:25:20 +00:00 · 2015-10-27 11:11:39 +00:00
425 changed files with 5995 additions and 17012 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,12 +1,2 @@
-/cert.pem
-/karma-reports
-/key.pem
-/lib
-/node_modules
-/packages/
-/vector/bundle.*
-/vector/components.css
-/vector/emojione/
-/vector/config.json
-/vector/olm.js
-.DS_Store
+node_modules
+lib
--- a/.modernizr.json
+++ b/.modernizr.json
@@ -1,14 +0,0 @@
-{
-  "minify": true,
-  "classPrefix": "modernizr_",
-  "options": [
-    "setClasses"
-  ],
-  "feature-detects": [
-    "test/css/displaytable",
-    "test/css/flexbox",
-    "test/es5/specification",
-    "test/css/objectfit",
-    "test/storage/localstorage"
-  ]
-}
--- a/.npmignore
+++ b/.npmignore
@@ -1,3 +1,3 @@
 example
 examples
-build/.module-cache
+.module-cache
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-    - 6   # node v6, to match jenkins
-install:
-    - npm install
-    - (cd node_modules/matrix-react-sdk && npm run build)
--- a/AUTHORS.rst
+++ b/AUTHORS.rst
@@ -1,12 +0,0 @@
-Vector is written mainly by the Vector team, building upon the Matrix React
-SDK. Vector also welcomes external contributions. Third party contributors
-include:
-
-* Nolan Darilek (https://github.com/ndarilek)
-  Accessibility and semantic markup contributions
-
-* https://github.com/neko259
-  Improved scrollbar CSS
-
-* Florent VIOLLEAU (https://github.com/floviolleau) <floviolleau at gmail dot com>
-  Improve README.md for a better understanding of installation instructions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,437 +0,0 @@
-Changes in [0.8.3](https://github.com/vector-im/vector-web/releases/tag/v0.8.3) (2016-10-12)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.2...v0.8.3)
-
- * Centre images in dialog buttons
-   [\#2453](https://github.com/vector-im/vector-web/pull/2453)
- * Only show quote option if RTE is enabled
-   [\#2448](https://github.com/vector-im/vector-web/pull/2448)
- * Fix join button for 'matrix' networks
-   [\#2443](https://github.com/vector-im/vector-web/pull/2443)
- * Don't stop paginating if no rooms match
-   [\#2422](https://github.com/vector-im/vector-web/pull/2422)
-
-Changes in [0.8.2](https://github.com/vector-im/vector-web/releases/tag/v0.8.2) (2016-10-05)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.1...v0.8.2)
-
- * Add native joining of 3p networks to room dir
-   [\#2379](https://github.com/vector-im/vector-web/pull/2379)
- * Update to linkify 2.1.3
-   [\#2406](https://github.com/vector-im/vector-web/pull/2406)
- * Use 'Sign In' / 'Sign Out' universally
-   [\#2383](https://github.com/vector-im/vector-web/pull/2383)
- * Prevent network dropdown resizing slightly
-   [\#2382](https://github.com/vector-im/vector-web/pull/2382)
- * Room directory: indicate when there are no results
-   [\#2380](https://github.com/vector-im/vector-web/pull/2380)
- * Room dir: New filtering & 3rd party networks
-   [\#2362](https://github.com/vector-im/vector-web/pull/2362)
- * Update linkify version
-   [\#2359](https://github.com/vector-im/vector-web/pull/2359)
- * Directory search join button
-   [\#2339](https://github.com/vector-im/vector-web/pull/2339)
-
-Changes in [0.8.1](https://github.com/vector-im/vector-web/releases/tag/v0.8.1) (2016-09-21)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.0...v0.8.1)
-
-
-Changes in [0.8.0](https://github.com/vector-im/vector-web/releases/tag/v0.8.0) (2016-09-21)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r3...v0.8.0)
-
- * Dbkr/rebrand
-   [\#2285](https://github.com/vector-im/vector-web/pull/2285)
- * Listen for close_scalar and close the dialog box when received
-   [\#2282](https://github.com/vector-im/vector-web/pull/2282)
- * Revert "improve lipstick and support scalar logout"
-   [\#2281](https://github.com/vector-im/vector-web/pull/2281)
- * improve lipstick and support scalar logout
-   [\#2280](https://github.com/vector-im/vector-web/pull/2280)
- * Fix changelog links
-   [\#2071](https://github.com/vector-im/vector-web/pull/2071)
- * Paginate Room Directory
-   [\#2241](https://github.com/vector-im/vector-web/pull/2241)
- * Make redeploy script symlink config
-   [\#2240](https://github.com/vector-im/vector-web/pull/2240)
- * Update the version of olm to 1.3.0
-   [\#2210](https://github.com/vector-im/vector-web/pull/2210)
- * Directory network selector
-   [\#2219](https://github.com/vector-im/vector-web/pull/2219)
- * Wmwragg/two state sublist headers
-   [\#2235](https://github.com/vector-im/vector-web/pull/2235)
- * Wmwragg/correct incoming call positioning
-   [\#2222](https://github.com/vector-im/vector-web/pull/2222)
- * Wmwragg/remove old filter
-   [\#2211](https://github.com/vector-im/vector-web/pull/2211)
- * Wmwragg/multi invite bugfix
-   [\#2198](https://github.com/vector-im/vector-web/pull/2198)
- * Wmwragg/chat multi invite
-   [\#2181](https://github.com/vector-im/vector-web/pull/2181)
- * shuffle bottomleftmenu around a bit
-   [\#2182](https://github.com/vector-im/vector-web/pull/2182)
- * Improve autocomplete behaviour (styling)
-   [\#2175](https://github.com/vector-im/vector-web/pull/2175)
- * First wave of E2E visuals
-   [\#2163](https://github.com/vector-im/vector-web/pull/2163)
- * FilePanel and NotificationPanel support
-   [\#2113](https://github.com/vector-im/vector-web/pull/2113)
- * Cursor: pointer on member info create room button
-   [\#2151](https://github.com/vector-im/vector-web/pull/2151)
- * Support for adding DM rooms to the MemberInfo Panel
-   [\#2147](https://github.com/vector-im/vector-web/pull/2147)
- * Wmwragg/one to one indicators
-   [\#2139](https://github.com/vector-im/vector-web/pull/2139)
- * Added back the Directory listing button, with new tootlip
-   [\#2136](https://github.com/vector-im/vector-web/pull/2136)
- * wmwragg/chat invite dialog fix
-   [\#2134](https://github.com/vector-im/vector-web/pull/2134)
- * Wmwragg/one to one chat
-   [\#2110](https://github.com/vector-im/vector-web/pull/2110)
- * Support toggling DM status of rooms
-   [\#2111](https://github.com/vector-im/vector-web/pull/2111)
- * Formatting toolbar for RTE message composer.
-   [\#2082](https://github.com/vector-im/vector-web/pull/2082)
- * jenkins.sh: install olm from jenkins artifacts
-   [\#2092](https://github.com/vector-im/vector-web/pull/2092)
- * e2e device CSS
-   [\#2085](https://github.com/vector-im/vector-web/pull/2085)
- * Bump to olm 1.1.0
-   [\#2069](https://github.com/vector-im/vector-web/pull/2069)
- * Improve readability of the changelog dialog
-   [\#2056](https://github.com/vector-im/vector-web/pull/2056)
- * Turn react consistency checks back on in develop builds
-   [\#2009](https://github.com/vector-im/vector-web/pull/2009)
- * Wmwragg/direct chat sublist
-   [\#2028](https://github.com/vector-im/vector-web/pull/2028)
-
-Changes in [0.7.5-r3](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r3) (2016-09-02)
-==================================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r2...v0.7.5-r3)
-
- * Bump to matrix-react-sdk 0.6.5-r3 in order to fix bug #2020 (tightloop when flooded with join events)
-
-
-Changes in [0.7.5-r2](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r2) (2016-09-01)
-==================================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r1...v0.7.5-r2)
-
- * Bump to matrix-react-sdk 0.6.5-r1 in order to fix guest access
-
-Changes in [0.7.5-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r1) (2016-08-28)
-==================================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5...v0.7.5-r1)
-
- * Correctly pin deps :(
-
-Changes in [0.7.5](https://github.com/vector-im/vector-web/releases/tag/v0.7.5) (2016-08-28)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4-r1...v0.7.5)
-
- * re-add leave button in RoomSettings
- * add /user URLs
- * recognise matrix.to links and other vector links
- * fix linkify dependency
- * fix avatar clicking in MemberInfo
- * fix RoomTagContextMenu so it works on historical rooms
- * warn people to put their Matrix HS on a separate domain to Vector
- * fix zalgos again
- * Add .travis.yml
-   [\#2007](https://github.com/vector-im/vector-web/pull/2007)
- * add fancy changelog dialog
-   [\#1972](https://github.com/vector-im/vector-web/pull/1972)
- * Update autocomplete design
-   [\#1978](https://github.com/vector-im/vector-web/pull/1978)
- * Update encryption info in README
-   [\#2001](https://github.com/vector-im/vector-web/pull/2001)
- * Added event/info message avatars back in
-   [\#2000](https://github.com/vector-im/vector-web/pull/2000)
- * Wmwragg/chat message presentation
-   [\#1987](https://github.com/vector-im/vector-web/pull/1987)
- * Make the notification slider work
-   [\#1982](https://github.com/vector-im/vector-web/pull/1982)
- * Use cpx to copy olm.js, and add watcher
-   [\#1966](https://github.com/vector-im/vector-web/pull/1966)
- * Make up a device display name
-   [\#1959](https://github.com/vector-im/vector-web/pull/1959)
-
-Changes in [0.7.4-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.4-r1) (2016-08-12)
-==================================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4...v0.7.4-r1)
- * Update to matrix-react-sdk 0.6.4-r1 to fix inviting multiple people
-
-
-Changes in [0.7.4](https://github.com/vector-im/vector-web/releases/tag/v0.7.4) (2016-08-11)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.3...v0.7.4)
-
- * Don't show border on composer when not in RTE mode
-   [\#1954](https://github.com/vector-im/vector-web/pull/1954)
- * Wmwragg/room tag menu
-   [\#1941](https://github.com/vector-im/vector-web/pull/1941)
- * Don't redirect to mobile app if verifying 3pid
-   [\#1951](https://github.com/vector-im/vector-web/pull/1951)
- * Make sure that we clear localstorage before *all* tests
-   [\#1950](https://github.com/vector-im/vector-web/pull/1950)
- * Basic CSS for multi-invite dialog
-   [\#1942](https://github.com/vector-im/vector-web/pull/1942)
- * More tests for the loading process:
-   [\#1947](https://github.com/vector-im/vector-web/pull/1947)
- * Support for refactored login token handling
-   [\#1946](https://github.com/vector-im/vector-web/pull/1946)
- * Various fixes and improvements to emojification.
-   [\#1935](https://github.com/vector-im/vector-web/pull/1935)
- * More app-loading tests
-   [\#1938](https://github.com/vector-im/vector-web/pull/1938)
- * Some tests of the application load process
-   [\#1936](https://github.com/vector-im/vector-web/pull/1936)
- * Add 'enable labs' setting to sample config
-   [\#1930](https://github.com/vector-im/vector-web/pull/1930)
- * Matthew/scalar
-   [\#1928](https://github.com/vector-im/vector-web/pull/1928)
- * Fix unit tests
-   [\#1929](https://github.com/vector-im/vector-web/pull/1929)
- * Wmwragg/mute mention state fix
-   [\#1926](https://github.com/vector-im/vector-web/pull/1926)
- * CSS for deactivate account dialog
-   [\#1919](https://github.com/vector-im/vector-web/pull/1919)
- * Wmwragg/mention state menu
-   [\#1900](https://github.com/vector-im/vector-web/pull/1900)
- * Fix UnknownBody styling for #1901
-   [\#1913](https://github.com/vector-im/vector-web/pull/1913)
- * Exclude olm from the webpack
-   [\#1914](https://github.com/vector-im/vector-web/pull/1914)
- * Wmwragg/button updates
-   [\#1912](https://github.com/vector-im/vector-web/pull/1912)
- * Wmwragg/button updates
-   [\#1828](https://github.com/vector-im/vector-web/pull/1828)
- * CSS for device management UI
-   [\#1909](https://github.com/vector-im/vector-web/pull/1909)
- * Fix a warning from RoomSubList
-   [\#1908](https://github.com/vector-im/vector-web/pull/1908)
- * Fix notifications warning layout
-   [\#1907](https://github.com/vector-im/vector-web/pull/1907)
- * Remove relayoutOnUpdate prop on gemini-scrollbar
-   [\#1883](https://github.com/vector-im/vector-web/pull/1883)
- * Bump dependency versions
-   [\#1842](https://github.com/vector-im/vector-web/pull/1842)
- * Wmwragg/mention state indicator round 2
-   [\#1835](https://github.com/vector-im/vector-web/pull/1835)
- * Wmwragg/spinner fix
-   [\#1822](https://github.com/vector-im/vector-web/pull/1822)
- * Wmwragg/mention state indicator
-   [\#1823](https://github.com/vector-im/vector-web/pull/1823)
- * Revert "Presentation for inline link"
-   [\#1809](https://github.com/vector-im/vector-web/pull/1809)
- * Wmwragg/modal restyle
-   [\#1806](https://github.com/vector-im/vector-web/pull/1806)
- * Presentation for inline link
-   [\#1799](https://github.com/vector-im/vector-web/pull/1799)
- * CSS for offline user colours
-   [\#1798](https://github.com/vector-im/vector-web/pull/1798)
- * Wmwragg/typography updates
-   [\#1776](https://github.com/vector-im/vector-web/pull/1776)
- * webpack: always use the olm from vector-web
-   [\#1766](https://github.com/vector-im/vector-web/pull/1766)
- * feat: large emoji support
-   [\#1718](https://github.com/vector-im/vector-web/pull/1718)
- * Autocomplete
-   [\#1717](https://github.com/vector-im/vector-web/pull/1717)
- * #1664 Set a maximum height for codeblocks
-   [\#1670](https://github.com/vector-im/vector-web/pull/1670)
- * CSS for device blocking
-   [\#1688](https://github.com/vector-im/vector-web/pull/1688)
- * Fix joining rooms by typing the alias
-   [\#1685](https://github.com/vector-im/vector-web/pull/1685)
- * Add ability to delete an alias from room directory
-   [\#1680](https://github.com/vector-im/vector-web/pull/1680)
- * package.json: add olm as optionalDependency
-   [\#1678](https://github.com/vector-im/vector-web/pull/1678)
- * Another go at enabling olm on vector.im/develop
-   [\#1675](https://github.com/vector-im/vector-web/pull/1675)
- * CSS for unverify button
-   [\#1661](https://github.com/vector-im/vector-web/pull/1661)
- * CSS fix for rooms with crypto enabled
-   [\#1660](https://github.com/vector-im/vector-web/pull/1660)
- * Karma: fix warning by ignoring olm
-   [\#1652](https://github.com/vector-im/vector-web/pull/1652)
- * Update for react-sdk dbkr/fix_peeking branch
-   [\#1639](https://github.com/vector-im/vector-web/pull/1639)
- * Update README.md
-   [\#1641](https://github.com/vector-im/vector-web/pull/1641)
- * Fix karma tests
-   [\#1643](https://github.com/vector-im/vector-web/pull/1643)
- * Rich Text Editor
-   [\#1553](https://github.com/vector-im/vector-web/pull/1553)
- * Fix RoomDirectory to join by alias whenever possible.
-   [\#1615](https://github.com/vector-im/vector-web/pull/1615)
- * Make the config optional
-   [\#1612](https://github.com/vector-im/vector-web/pull/1612)
- * CSS support for device verification
-   [\#1610](https://github.com/vector-im/vector-web/pull/1610)
- * Don't use SdkConfig
-   [\#1609](https://github.com/vector-im/vector-web/pull/1609)
- * serve config.json statically instead of bundling it
-   [\#1516](https://github.com/vector-im/vector-web/pull/1516)
-
-Changes in [0.7.3](https://github.com/vector-im/vector-web/releases/tag/v0.7.3) (2016-06-03)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.2...v0.7.3)
-
-* Update to react-sdk 0.6.3
-
-Changes in [0.7.2](https://github.com/vector-im/vector-web/releases/tag/v0.7.2) (2016-06-02)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.1...v0.7.2)
-
- * Correctly bump the dep on new matrix-js-sdk and matrix-react-sdk
-
-Changes in [0.7.1](https://github.com/vector-im/vector-web/releases/tag/v0.7.1) (2016-06-02)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.0...v0.7.1)
-
- * Fix accidentally committed local changes to the default config.json (doh!)
-
-Changes in [0.7.0](https://github.com/vector-im/vector-web/releases/tag/v0.7.0) (2016-06-02)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.1...v0.7.0)
-
- * Update to matrix-react-sdk 0.6.0 - see
-   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.6.0/CHANGELOG.md)
- * Style selection color.
-   [\#1557](https://github.com/vector-im/vector-web/pull/1557)
- * Fix NPE when loading the Settings page which infini-spinnered
-   [\#1518](https://github.com/vector-im/vector-web/pull/1518)
- * Add option to enable email notifications
-   [\#1469](https://github.com/vector-im/vector-web/pull/1469)
-
-Changes in [0.6.1](https://github.com/vector-im/vector-web/releases/tag/v0.6.1) (2016-04-22)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.0...v0.6.1)
-
- * Update to matrix-react-sdk 0.5.2 - see
-   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.2/CHANGELOG.md)
- * Don't relayout scrollpanels every time something changes
-   [\#1438](https://github.com/vector-im/vector-web/pull/1438)
- * Include react-addons-perf for non-production builds
-   [\#1431](https://github.com/vector-im/vector-web/pull/1431)
-
-Changes in [0.6.0](https://github.com/vector-im/vector-web/releases/tag/v0.6.0) (2016-04-19)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.5.0...v0.6.0)
-
- * Matthew/design tweaks
-   [\#1402](https://github.com/vector-im/vector-web/pull/1402)
- * Improve handling of notification rules we can't parse
-   [\#1399](https://github.com/vector-im/vector-web/pull/1399)
- * Do less mangling of jenkins builds
-   [\#1391](https://github.com/vector-im/vector-web/pull/1391)
- * Start Notifications component refactor
-   [\#1386](https://github.com/vector-im/vector-web/pull/1386)
- * make the UI fadable to help with decluttering
-   [\#1376](https://github.com/vector-im/vector-web/pull/1376)
- * Get and display a user's pushers in settings
-   [\#1374](https://github.com/vector-im/vector-web/pull/1374)
- * URL previewing support
-   [\#1343](https://github.com/vector-im/vector-web/pull/1343)
- * 😄 Emoji autocomplete and unicode emoji to image conversion using emojione.
-   [\#1332](https://github.com/vector-im/vector-web/pull/1332)
- * Show full-size avatar on MemberInfo avatar click
-   [\#1340](https://github.com/vector-im/vector-web/pull/1340)
- * Numerous other changes via [matrix-react-sdk 0.5.1](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.1/CHANGELOG.md)
-
-Changes in [0.5.0](https://github.com/vector-im/vector-web/releases/tag/v0.5.0) (2016-03-30)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.4.1...v0.5.0)
-
- * Prettier, animated placeholder :D
-   [\#1292](https://github.com/vector-im/vector-web/pull/1292)
-   (Disabled for now due to high CPU usage)
- * RoomDirectory: use SimpleRoomHeader instead of RoomHeader
-   [\#1307](https://github.com/vector-im/vector-web/pull/1307)
- * Tell webpack not to parse the highlight.js languages
-   [\#1277](https://github.com/vector-im/vector-web/pull/1277)
- * CSS for https://github.com/matrix-org/matrix-react-sdk/pull/247
-   [\#1249](https://github.com/vector-im/vector-web/pull/1249)
- * URI-decode the hash-fragment
-   [\#1254](https://github.com/vector-im/vector-web/pull/1254)
-
-Changes in [0.4.1](https://github.com/vector-im/vector-web/releases/tag/v0.4.1) (2016-03-23)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.4.0...v0.4.1)
- * Update to matrix-react-sdk 0.3.1; see
-   https://github.com/matrix-org/matrix-react-sdk/blob/v0.3.1/CHANGELOG.md
-   (Disables debug logging)
-
-Changes in [0.4.0](https://github.com/vector-im/vector-web/releases/tag/v0.4.0) (2016-03-23)
-============================================================================================
-[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.3.0...v0.4.0)
-
- * Update to matrix-react-sdk 0.3.0; see
-   https://github.com/matrix-org/matrix-react-sdk/blob/master/CHANGELOG.md
-
-Other changes
- * permalink button
-   [\#1232](https://github.com/vector-im/vector-web/pull/1232)
- * make senderprofiles clickable
-   [\#1191](https://github.com/vector-im/vector-web/pull/1191)
- * fix notif spam when logging in from a guest session by correctly logging out
-   first.
-   [\#1180](https://github.com/vector-im/vector-web/pull/1180)
- * use new start_login_from_guest dispatch for cancellable logins from guest
-   accounts
-   [\#1165](https://github.com/vector-im/vector-web/pull/1165)
- * Use then() chaining rather than manual callbacks
-   [\#1171](https://github.com/vector-im/vector-web/pull/1171)
- * Remove trailing whitespace
-   [\#1163](https://github.com/vector-im/vector-web/pull/1163)
- * Update the actions of default rules instead of overriding.
-   [\#1037](https://github.com/vector-im/vector-web/pull/1037)
- * Update README to include `npm install` in react-sdk
-   [\#1137](https://github.com/vector-im/vector-web/pull/1137)
-
-Changes in vector v0.3.0 (2016-03-11)
-======================================
- * Lots of new bug fixes and updates
-
-Changes in vector v0.2.0 (2016-02-24)
-======================================
- * Refactor of matrix-react-sdk and vector to remove separation between views and
-   controllers
- * Temporarily break the layering abstraction between vector and matrix-react-sdk
-   for expedience in developing vector.
- * Vast numbers of new features, including read receipts, read-up-to markers,
-   updated look and feel, search, new room and user settings, and email invites.
-
-Changes in vector v0.1.2 (2015-10-28)
-======================================
- * Support Room Avatars
- * Fullscreen video calls
- * Mute mic in VoIP calls
- * Fix bug with multiple desktop notifications
- * Context menu on messages
- * Better hover-over on member list
- * Support CAS auth
- * Many other bug fixes
-
-Changes in vector v0.1.1 (2015-08-10)
-======================================
-
- * Support logging in with an email address
- * Use the Vector identity server
- * Fix a bug where the client was not stopped properly on logout
- * Fix bugs where field values would be forgotten if login or registration failed
- * Improve URL bar navigation
- * Add explanatory help text on advanced server options
- * Fix a bug which caused execptions on malformed VoIP invitations
- * Remove superfluous scrollbars on Firefox
- * Numerous CSS fixes
- * Improved accessibility
- * Support command-click / middle click to open image in a new tab
- * Improved room directory
- * Fix display of text with many combining unicode points
-
-Changes in vector v0.1.0 (2015-08-10)
-======================================
-Initial release
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
@@ -1,4 +0,0 @@
-Contributing code to Vector
-===========================
-
-Vector follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst
--- a/README.md
+++ b/README.md
@@ -1,269 +1,142 @@
-Vector/Web
-==========
+matrix-react-sdk
+================

-Vector is a Matrix web client built using the Matrix React SDK (https://github.com/matrix-org/matrix-react-sdk).
+This is a react-based SDK for inserting a Matrix chat/voip client into a web page.

-Getting Started
-===============
+This package provides the logic and 'controller' parts for the UI components. This
+forms one part of a complete matrix client, but it not useable in isolation. It
+must be used from a 'skin'. A skin provides:
+ * The HTML for the UI components (in the form of React `render` methods)
+ * The CSS for this HTML
+ * The containing application 
+ * Zero or more 'modules' containing non-UI functionality

-The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta.
-The develop branch is continuously deployed by Jenkins at https://vector.im/develop for
-those who like living dangerously.
+Skins are modules are exported from such a package in the `lib` directory.
+`lib/skins` contains one directory per-skin, named after the skin, and the
+`modules` directory contains modules as their javascript files.

-To host your own copy of Vector, the quickest bet is to use a pre-built released version
-of Vector:
+A basic skin is provided in the matrix-react-skin package. This also contains
+a minimal application that instantiates the basic skin making a working matrix
+client.

-1. Download the latest version from https://vector.im/packages/
-1. Untar the tarball on your web server
-1. Move (or symlink) the vector-x.x.x directory to an appropriate name
-1. If desired, copy `config.sample.json` to `config.json` and edit it
-   as desired. See below for details.
-1. Enter the URL into your browser and log into vector!
+You can use matrix-react-sdk directly, but to do this you would have to provide
+'views' for each UI component. To get started quickly, use matrix-react-skin.

-Important Security Note
-=======================
-
-We do not recommend running Vector from the same domain name as your Matrix
-homeserver.  The reason is the risk of XSS (cross-site-scripting) vulnerabilities
-that could occur if someone caused Vector to load and render malicious user generated
-content from a Matrix API which then had trusted access to Vector (or other apps) due
-to sharing the same domain.
-
-We have put some coarse mitigations into place to try to protect against this situation,
-but it's still not good practice to do it in the first place.
-See https://github.com/vector-im/vector-web/issues/1977 for more details.
-
-Building From Source
-====================
-
-Vector is a modular webapp built with modern ES6 and requires a npm build system to build.
-
-1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git`
-1. Switch to the vector directory: `cd vector-web`
-1. Install the prerequisites: `npm install`
-1. If you are using the `develop` branch of vector, you will probably need to
-   rebuild one of the dependencies, due to https://github.com/npm/npm/issues/3055:
-   `(cd node_modules/matrix-react-sdk && npm install)`
-1. Configure the app by copying `config.sample.json` to `config.json` and modifying
-   it (see below for details)
-1. `npm run package` to build a tarball to deploy. Untaring this file will give
-   a version-specific directory containing all the files that need to go on your
-   web server.
-
-Note that `npm run package` is not supported on Windows, so Windows users can run `npm
-run build`, which will build all the necessary files into the `vector`
-directory. The version of Vector will not appear in Settings without
-using the package script. You can then mount the vector directory on your
-webserver to actually serve up the app, which is entirely static content.
-
-config.json
-===========
-
-You can configure the app by copying `vector/config.sample.json` to
-`vector/config.json` and customising it:
-
-1. `default_hs_url` is the default home server url.
-1. `default_is_url` is the default identity server url (this is the server used
-   for verifying third party identifiers like email addresses). If this is blank,
-   registering with an email address, adding an email address to your account,
-   or inviting users via email address will not work.  Matrix identity servers are
-   very simple web services which map third party identifiers (currently only email
-   addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html
-   for more details.  Currently the only public matrix identity servers are https://matrix.org
-   and https://vector.im.  In future identity servers will be decentralised.
-1. `roomDirectory`: config for the public room directory. This section encodes behaviour
-   on the room directory screen for filtering the list by server / network type and joining
-   third party networks. This config section will disappear once APIs are available to
-   get this information for home servers. This section is optional.
-1. `roomDirectory.servers`: List of other Home Servers' directories to include in the drop
-   down list. Optional.
-1. `roomDirectory.serverConfig`: Config for each server in `roomDirectory.servers`. Optional.
-1. `roomDirectory.serverConfig.<server_name>.networks`: List of networks (named
-   in `roomDirectory.networks`) to include for this server. Optional.
-1. `roomDirectory.networks`: config for each network type. Optional.
-1. `roomDirectory.<network_type>.name`: Human-readable name for the network. Required.
-1. `roomDirectory.<network_type>.protocol`: Protocol as given by the server in
-   `/_matrix/client/unstable/thirdparty/protocols` response. Required to be able to join
-   this type of third party network.
-1. `roomDirectory.<network_type>.domain`: Domain as given by the server in
-   `/_matrix/client/unstable/thirdparty/protocols` response, if present. Required to be
-   able to join this type of third party network, if present in `thirdparty/protocols`.
-1. `roomDirectory.<network_type>.portalRoomPattern`: Regular expression matching aliases
-   for portal rooms to locations on this network. Required.
-1. `roomDirectory.<network_type>.icon`: URL to an icon to be displayed for this network. Required.
-1. `roomDirectory.<network_type>.example`: Textual example of a location on this network,
-   eg. '#channel' for an IRC network. Optional.
-1. `roomDirectory.<network_type>.nativePattern`: Regular expression that matches a
-   valid location on this network. This is used as a hint to the user to indicate
-   when a valid location has been entered so it's not necessary for this to be
-   exactly correct. Optional.
-
-Running as a Desktop app
+How to customise the SDK
 ========================

-In future we'll do an official distribution of Vector as an desktop app.  Meanwhile,
-there are a few options:
+The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+encourage a very modular and reusable architecture, making it easy to
+customise and use UI widgets independently of the rest of the SDK and your app.
+In practice this means:

-@asdf:matrix.org points out that you can use nativefier and it just works(tm):
+ * The UI of the app is strictly split up into a hierarchy of components.
+ 
+ * Each component has its own:
+   * View object defined as a React javascript class containing embedded
+     HTML expressed in React's JSX notation.
+   * CSS file, which defines the styling specific to that component.
+ 
+ * Components are loosely grouped into the 5 levels outlined by atomic design:
+   * atoms: fundamental building blocks (e.g. a timestamp tag)
+   * molecules: "group of atoms which functions together as a unit"
+     (e.g. a message in a chat timeline)
+   * organisms: "groups of molecules (and atoms) which form a distinct section
+     of a UI" (e.g. a view of a chat room)
+   * templates: "a reusable configuration of organisms" - used to combine and
+     style organisms into a well-defined global look and feel
+   * pages: specific instances of templates.

-```
-sudo npm install nativefier -g
-nativefier https://vector.im/beta/
-```
+ Good separation between the components is maintained by adopting various best
+ practices that anyone working with the SDK needs to be be aware of and uphold:

-krisa has a dedicated electron project at https://github.com/krisak/vector-electron-desktop
-(although you should swap out the 'vector' folder for the latest vector tarball you want to run.
-Get a tarball from https://vector.im/packages or build your own - see Building From Source
-above).
+  * Views are named with upper camel case (e.g. molecules/MessageTile.js)

-There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop
+  * The view's CSS file MUST have the same name (e.g. molecules/MessageTile.css)

+  * Per-view CSS is optional - it could choose to inherit all its styling from
+    the context of the rest of the app, although this is unusual for any but 
+    the simplest atoms and molecules.

-Development
-===========
+  * The view MUST *only* refer to the CSS rules defined in its own CSS file.
+    'Stealing' styling information from other components (including parents)
+    is not cool, as it breaks the independence of the components.

-Before attempting to develop on Vector you **must** read the developer guide
-for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which
-also defines the design, architecture and style for Vector too.
+  * CSS classes are named with an app-specific namespacing prefix to try to avoid
+    CSS collisions.  The base skin shipped by Matrix.org with the matrix-react-sdk
+    uses the naming prefix "mx_".  A company called Yoyodyne Inc might use a
+    prefix like "yy_" for its app-specific classes.

-The idea of Vector is to be a relatively lightweight "skin" of customisations on
-top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
-higher and lower level React components useful for building Matrix communication
-apps using React.
+  * CSS classes use upper camel case when they describe React components - e.g.
+    .mx_MessageTile is the selector for the CSS applied to a MessageTile view.

-After creating a new component you must run `npm run reskindex` to regenerate
-the `component-index.js` for the app (used in future for skinning)
+  * CSS classes for DOM elements within a view which aren't components are named
+    by appending a lower camel case identifier to the view's class name - e.g.
+    .mx_MessageTile_randomDiv is how you'd name the class of an arbitrary div
+    within the MessageTile view.

-**However, as of July 2016 this layering abstraction is broken due to rapid
-development on Vector forcing `matrix-react-sdk` to move fast at the expense of
-maintaining a clear abstraction between the two.**  Hacking on Vector inevitably
-means hacking equally on `matrix-react-sdk`, and there are bits of
-`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project
-(e.g. matrix-react-sdk specific CSS), and a bunch of Vector specific behaviour
-in the `matrix-react-sdk` (grep for Vector).  This separation problem will be
-solved asap once development on Vector (and thus matrix-react-sdk) has
-stabilised.  Until then, the two projects should basically be considered as a
-single unit.  In particular, `matrix-react-sdk` issues are currently filed
-against `vector-web` in github.
+  * We deliberately use vanilla CSS 3.0 to avoid adding any more magic
+    dependencies into the mix than we already have.  App developers are welcome
+    to use whatever floats their boat however.

-Please note that Vector is intended to run correctly without access to the public
-internet.  So please don't depend on resources (JS libs, CSS, images, fonts)
-hosted by external CDNs or servers but instead please package all dependencies
-into Vector itself.
+  * The CSS for a component can however override the rules for child components.
+    For instance, .mx_RoomList .mx_RoomTile {} would be the selector to override
+    styles of RoomTiles when viewed in the context of a RoomList view.
+    Overrides *must* be scoped to the View's CSS class - i.e. don't just define
+    .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
+    own CSS.  Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
+    only to the context of RoomList views.  N.B. overrides should be relatively
+    rare as in general CSS inheritence should be enough.

-Setting up a dev environment
-============================
+  * Components should render only within the bounding box of their outermost DOM
+    element. Page-absolute positioning and negative CSS margins and similar are
+    generally not cool and stop the component from being reused easily in
+    different places.

-Much of the functionality in Vector is actually in the `matrix-react-sdk` and
-`matrix-js-sdk` modules. It is possible to set these up in a way that makes it
-easy to track the `develop` branches in git and to make local changes without
-having to manually rebuild each time.
+  * We don't use the atomify library itself, as React already provides most
+    of the modularity requirements it brings to the table.

-First clone and build `matrix-js-sdk`:
+With all this in mind, here's how you go about skinning the react SDK UI
+components to embed a Matrix client into your app:

-1. `git clone git@github.com:matrix-org/matrix-js-sdk.git`
-1. `pushd matrix-js-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `npm install source-map-loader` # because webpack is made of fail (https://github.com/webpack/webpack/issues/1472)
-1. `popd`
+  * Create a new NPM project. Be sure to directly depend on react, (otherwise
+    you can end up with two copies of react).
+  * Create an index.js file that sets up react. Add require statements for
+    React and matrix-react-sdk. Load a skin using the 'loadSkin' method on the
+    SDK and call Render. This can be a skin provided by a separate package or
+    a skin in the same package.
+  * Add a way to build your project: we suggest copying the scripts block 
+    from matrix-react-skin (which uses babel and webpack). You could use 
+    different tools but remember that at least the skins and modules of
+    your project should end up in plain (ie. non ES6, non JSX) javascript in
+    the lib directory at the end of the build process, as well as any
+    packaging that you might do.
+  * Create an index.html file pulling in your compiled javascript and the
+    CSS bundle from the skin you use. For now, you'll also need to manually
+    import CSS from any skins that your skin inherts from.

-Then similarly with `matrix-react-sdk`:
+To Create Your Own Skin
+=======================
+To actually change the look of a skin, you can create a base skin (which
+does not use views from any other skin) or you can make a derived skin.
+Note that derived skins are currently experimental: for example, the CSS
+from the skins it is based on will not be automatically included.

-1. `git clone git@github.com:matrix-org/matrix-react-sdk.git`
-1. `pushd matrix-react-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `popd`
+To make a skin, create React classes for any custom components you wish to add
+in a skin within `src/skins/<skin name>`. These can be based off the files in
+`views` in the `matrix-react-skin` package, modifying the require() statement
+appropriately.

-Finally, build and start vector itself:
+If you make a derived skin, you only need copy the files you wish to customise.

-1. `git clone git@github.com:vector-im/vector-web.git`
-1. `cd vector-web`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `rm -r node_modules/matrix-react-sdk; ln -s ../../matrix-react-sdk node_modules/`
-1. `npm start`
-1. Wait a few seconds for the initial build to finish; you should see something like:
+Once you've made all your view files, you need to make a `skinfo.json`. This
+contains all the metadata for a skin. This is a JSON file with, currently, a
+single key, 'baseSkin'. Set this to the empty string if your skin is a base skin,
+or for a derived skin, set it to the path of your base skin's skinfo.json file, as
+you would use in a require call.

-    ```
-    Hash: b0af76309dd56d7275c8
-    Version: webpack 1.12.14
-    Time: 14533ms
-             Asset     Size  Chunks             Chunk Names
-         bundle.js   4.2 MB       0  [emitted]  main
-        bundle.css  91.5 kB       0  [emitted]  main
-     bundle.js.map  5.29 MB       0  [emitted]  main
-    bundle.css.map   116 kB       0  [emitted]  main
-        + 1013 hidden modules
-    ```
-   Remember, the command will not terminate since it runs the web server
-   and rebuilds source files when they change. This development server also
-   disables caching, so do NOT use it in production.
-1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
-
-When you make changes to `matrix-react-sdk`, you will need to run `npm run
-build` in the relevant directory. You can do this automatically by instead
-running `npm start` in the directory, to start a development builder which
-will watch for changes to the files and rebuild automatically.
-
-If you add or remove any components from the Vector skin, you will need to rebuild
-the skin's index by running, `npm run reskindex`.
-
-If any of these steps error with, `file table overflow`, you are probably on a mac
-which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
-You'll need to do this in each new terminal you open before building vector.
-
-Filing issues
-=============
-
-All issues for Vector-web and Matrix-react-sdk should be filed at
-https://github.com/matrix-org/matrix-react-sdk/issues
-
-Triaging issues
-===============
-
-Issues will be triaged by the core team using the following primary set of tags:
-
-priority:
-    P1: top priority; typically blocks releases.
-    P2: one below that
-    P3: non-urgent
-    P4/P5: bluesky some day, who knows.
-
-bug or feature:
-  bug severity:
-     * cosmetic - feature works functionally but UI/UX is broken.
-     * critical - whole app doesn't work
-     * major - entire feature doesn't work
-     * minor - partially broken feature (but still usable)
-
-     * release blocker
-
-     * ui/ux (think of this as cosmetic)
-
-     * network (specific to network conditions)
-     * platform (platform specific)
-
-Enabling encryption
-===================
-
-End-to-end encryption in Vector and Matrix is not yet considered ready for
-day-to-day use; it is experimental and should be considered only as a
-proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
-of the current progress.
-
-To enable the (very experimental) support, check the 'End-to-End Encryption'
-box in the 'Labs' section of the user settings (note that the labs are disabled
-on http://vector.im/beta: you will need to use http://vector.im/develop or your
-own deployment of vector). The Room Settings dialog will then show an
-'Encryption' setting; rooms for which you are an administrator will offer you
-the option of enabling encryption. Any messages sent in that room will then be
-encrypted.
-
-Note that historical encrypted messages cannot currently be decoded - history
-is therefore lost when the page is reloaded.
+Now you have the basis of a skin, you need to generate a skindex.json file. The
+`reskindex.js` tool in matrix-react-sdk does this for you. It is suggested that
+you add an npm script to run this, as in matrix-react-skin.

+For more specific detail on any of these steps, look at matrix-react-skin.
--- a/deploy/redeploy.py
+++ b/deploy/redeploy.py
@@ -1,180 +0,0 @@
-#!/usr/bin/env python
-from __future__ import print_function
-import json, requests, tarfile, argparse, os, errno
-from urlparse import urljoin
-from flask import Flask, jsonify, request, abort
-app = Flask(__name__)
-
-arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = (
-    None, None, None, None, None
-)
-
-def download_file(url):
-    local_filename = url.split('/')[-1]
-    r = requests.get(url, stream=True)
-    with open(local_filename, 'wb') as f:
-        for chunk in r.iter_content(chunk_size=1024): 
-            if chunk: # filter out keep-alive new chunks
-                f.write(chunk)
-    return local_filename
-
-def untar_to(tarball, dest):
-    with tarfile.open(tarball) as tar:
-        tar.extractall(dest)
-
-def create_symlink(source, linkname):
-    try:
-        os.symlink(source, linkname)
-    except OSError, e:
-        if e.errno == errno.EEXIST:
-            # atomic modification
-            os.symlink(source, linkname + ".tmp")
-            os.rename(linkname + ".tmp", linkname)
-        else:
-            raise e
-
-@app.route("/", methods=["POST"])
-def on_receive_jenkins_poke():
-    # {
-    #    "name": "VectorWebDevelop",
-    #    "build": {
-    #        "number": 8
-    #    }
-    # }
-    incoming_json = request.get_json()
-    if not incoming_json:
-        abort(400, "No JSON provided!")
-        return
-    print("Incoming JSON: %s" % (incoming_json,))
-
-    job_name = incoming_json.get("name")
-    if not isinstance(job_name, basestring):
-        abort(400, "Bad job name: %s" % (job_name,))
-        return
-
-    build_num = incoming_json.get("build", {}).get("number", 0)
-    if not build_num or build_num <= 0 or not isinstance(build_num, int):
-        abort(400, "Missing or bad build number")
-        return
-
-    artifact_url = urljoin(
-        arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num)
-    )
-    artifact_response = requests.get(artifact_url).json()
-
-    # {
-    # "actions": [],
-    # "artifacts": [
-    #   {
-    #   "displayPath": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz",
-    #   "fileName": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz",
-    #   "relativePath": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz"
-    #   }
-    # ],
-    # "building": false,
-    # "description": null,
-    # "displayName": "#11",
-    # "duration": 137976,
-    # "estimatedDuration": 132008,
-    # "executor": null,
-    # "fullDisplayName": "VectorWebDevelop #11",
-    # "id": "11",
-    # "keepLog": false,
-    # "number": 11,
-    # "queueId": 12254,
-    # "result": "SUCCESS",
-    # "timestamp": 1454432640079,
-    # "url": "http://matrix.org/jenkins/job/VectorWebDevelop/11/",
-    # "builtOn": "",
-    # "changeSet": {},
-    # "culprits": []
-    # }
-    if artifact_response.get("result") != "SUCCESS":
-        abort(404, "Not deploying. Build was not marked as SUCCESS.")
-        return
-
-    if len(artifact_response.get("artifacts", [])) != 1:
-        abort(404, "Not deploying. Build has an unexpected number of artifacts.")
-        return
-
-    tar_gz_path = artifact_response["artifacts"][0]["relativePath"]
-    if not tar_gz_path.endswith(".tar.gz"):
-        abort(404, "Not deploying. Artifact is not a .tar.gz file")
-        return
-
-    tar_gz_url = urljoin(
-        arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path)
-    )
-
-    print("Retrieving .tar.gz file: %s" % tar_gz_url)
-    filename = download_file(tar_gz_url)
-    print("Downloaded file: %s" % filename)
-    name_str = filename.replace(".tar.gz", "")
-    untar_location = os.path.join(arg_extract_path, name_str)
-    untar_to(filename, untar_location)
-
-    if arg_should_clean:
-        os.remove(filename)
-
-    # stamp the version somewhere JS can get to it
-    with open(os.path.join(untar_location, "vector/version"), "w") as stamp_file:
-        stamp_file.write(name_str)
-
-    create_symlink(source=os.path.join(untar_location, "vector"), linkname=arg_symlink)
-
-    if arg_config_location:
-        create_symlink(source=arg_config_location, linkname=os.path.join(untar_location, "vector", 'config.json'))
-
-    return jsonify({})
-
-if __name__ == "__main__":
-    parser = argparse.ArgumentParser("Runs a Vector redeployment server.")
-    parser.add_argument(
-        "-j", "--jenkins", dest="jenkins", default="http://matrix.org/jenkins/", help=(
-            "The base URL of the Jenkins web server. This will be hit to get the\
-            built artifacts (the .gz file) for redeploying."
-        )
-    )
-    parser.add_argument(
-        "-p", "--port", dest="port", default=4000, type=int, help=(
-            "The port to listen on for requests from Jenkins."
-        )
-    )
-    parser.add_argument(
-        "-e", "--extract", dest="extract", default="./extracted", help=(
-            "The location to extract .tar.gz files to."
-        )
-    )
-    parser.add_argument(
-        "-c", "--clean", dest="clean", action="store_true", default=False, help=(
-            "Remove .tar.gz files after they have been downloaded and extracted."
-        )
-    )
-    parser.add_argument(
-        "-s", "--symlink", dest="symlink", default="./latest", help=(
-            "Write a symlink to this location pointing to the extracted tarball. \
-            New builds will keep overwriting this symlink. The symlink will point \
-            to the /vector directory INSIDE the tarball."
-        )
-    )
-    parser.add_argument(
-        "--config", dest="config", help=(
-            "Write a symlink to config.json in the extracted tarball. \
-            To this location."
-        )
-    )
-    args = parser.parse_args()
-    if args.jenkins.endswith("/"): # important for urljoin
-        arg_jenkins_url = args.jenkins
-    else:
-        arg_jenkins_url = args.jenkins + "/"
-    arg_extract_path = args.extract
-    arg_should_clean = args.clean
-    arg_symlink = args.symlink
-    arg_config_location = args.config
-    print(
-        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
-        (args.port, arg_extract_path,
-            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location)
-    )
-    app.run(host="0.0.0.0", port=args.port, debug=True)
--- a/docs/conferencing.md
+++ b/docs/conferencing.md
@@ -1,52 +0,0 @@
-# VoIP Conferencing
-
-This is a draft proposal for a naive voice/video conferencing implementation for
-Matrix clients.  There are many possible conferencing architectures possible for
-Matrix (Multipoint Conferencing Unit (MCU); Stream Forwarding Unit (SFU); Peer-
-to-Peer mesh (P2P), etc; events shared in the group room; events shared 1:1;
-possibly even out-of-band signalling).
-
-This is a starting point for a naive MCU implementation which could provide one
-possible Matrix-wide solution in  future, which retains backwards compatibility
-with standard 1:1 calling.
-
- * A client chooses to initiate a conference for a given room by starting a
-   voice or video call with a 'conference focus' user.  This is a virtual user
-   (typically Application Service) which implements a conferencing bridge.  It
-   isn't defined how the client discovers or selects this user.
-
- * The conference focus user MUST join the room in which the client has
-   initiated the conference - this may require the client to invite the
-   conference focus user to the room, depending on the room's `join_rules`. The
-   conference focus user needs to be in the room to let the bridge eject users
-   from the conference who have left the room in which it was initiated, and aid
-   discovery of the conference by other users in the room.  The bridge
-   identifies the room to join based on the user ID by which it was invited.
-   The format of this identifier is implementation dependent for now.
-
- * If a client leaves the group chat room, they MUST be ejected from the
-   conference. If a client leaves the 1:1 room with the conference focus user,
-   they SHOULD be ejected from the conference.
-
- * For now, rooms can contain multiple conference focus users - it's left to
-   user or client implementation to select which to converge on.  In future this
-   could be mediated using a state event (e.g. `im.vector.call.mcu`), but we
-   can't do that right now as by default normal users can't set arbitrary state
-   events on a room.
-
- * To participate in the conference, other clients initiates a standard 1:1
-   voice or video call to the conference focus user.
-
- * For best UX, clients SHOULD show the ongoing voice/video call in the UI
-   context of the group room rather than 1:1 with the focus user.  If a client
-   recognises a conference user present in the room, it MAY chose to highlight
-   this in the UI (e.g. with a "conference ongoing" notification, to aid
-   discovery).  Clients MAY hide the 1:1 room with the focus user (although in
-   future this room could be used for floor control or other direct
-   communication with the conference focus)
-
- * When all users have left the conference, the 'conference focus' user SHOULD
-   leave the room.
-
- * If a conference focus user joins a room but does not receive a 1:1 voice or
-   video call, it SHOULD time out after a period of time and leave the room.
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -1,42 +0,0 @@
-#!/bin/bash
-
-set -e
-
-export NVM_DIR="/home/jenkins/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 6
-
-set -x
-
-npm install
-
-# apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked.
-npm install matrix-react-sdk matrix-js-sdk
-
-# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url
-# from our package.json (or even matrix-js-sdk's) in preference.
-tar -C olm -xz < olm/olm-*.tgz
-rm -r node_modules/olm
-cp -r olm/package node_modules/olm
-
-# we may be using a dev branch of react-sdk, in which case we need to build it
-(cd node_modules/matrix-react-sdk && npm run build)
-
-# run the mocha tests
-npm run test
-
-# build our artifacts; dumps them in ./vector
-npm run build:dev
-
-# gzip up ./vector
-rm vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
-
- # node_modules deps from 'npm install' don't have a .git dir so can't
- # rev-parse; but they do set the commit in package.json under 'gitHead' which
- # we're grabbing here.
-REACT_SHA=$(grep 'gitHead' node_modules/matrix-react-sdk/package.json | cut -d \" -f 4 | head -c 12)
-JSSDK_SHA=$(grep 'gitHead' node_modules/matrix-js-sdk/package.json | cut -d \" -f 4 | head -c 12)
-
-VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
-
-tar -zcvhf vector-$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA.tar.gz vector #g[z]ip, [c]reate archive, [v]erbose, [f]ilename, [h]ard-dereference (do not archive symlinks)
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,142 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var webpack = require('webpack');
-
-/*
- * We use webpack to build our tests. It's a pain to have to wait for webpack
- * to build everything; however it's the easiest way to load our dependencies
- * from node_modules.
- *
- * If you run karma in multi-run mode (with `npm run test:multi`), it will watch
- * the tests for changes, and webpack will rebuild using a cache. This is much quicker
- * than a clean rebuild.
- */
-
-// the name of the test file. By default, a special file which runs all tests.
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-process.env.Q_DEBUG = 1;
-
-module.exports = function (config) {
-    config.set({
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            'node_modules/babel-polyfill/browser.js',
-            testFile,
-            {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
-        ],
-
-        // redirect img links to the karma server
-        proxies: {
-            "/img/": "/base/vector/img/",
-        },
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'test/**/*.js': ['webpack', 'sourcemap']
-        },
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress', 'junit'],
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
-        // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file
-        // changes
-        autoWatch: true,
-
-        // start these browsers
-        // available browser launchers:
-        // https://npmjs.org/browse/keyword/karma-launcher
-        browsers: [
-            'Chrome',
-            //'PhantomJS',
-        ],
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        // singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity,
-
-        junitReporter: {
-            outputDir: 'karma-reports',
-        },
-
-        webpack: {
-            module: {
-                loaders: [
-                    { test: /\.json$/, loader: "json" },
-                    {
-                        test: /\.js$/, loader: "babel",
-                        include: [path.resolve('./src'),
-                                  path.resolve('./test'),
-                                 ],
-                        query: {
-                            // we're using babel 5, for consistency with
-                            // the release build, which doesn't use the
-                            // presets.
-                            // presets: ['react', 'es2015'],
-                        },
-                    },
-                ],
-                noParse: [
-                    // don't parse the languages within highlight.js. They
-                    // cause stack overflows
-                    // (https://github.com/webpack/webpack/issues/1721), and
-                    // there is no need for webpack to parse them - they can
-                    // just be included as-is.
-                    /highlight\.js\/lib\/languages/,
-
-                    // also disable parsing for sinon, because it
-                    // tries to do voodoo with 'require' which upsets
-                    // webpack (https://github.com/webpack/webpack/issues/304)
-                    /sinon\/pkg\/sinon\.js$/,
-                ],
-            },
-            resolve: {
-                alias: {
-                    // alias any requires to the react module to the one in our path, otherwise
-                    // we tend to get the react source included twice when using npm link.
-                    react: path.resolve('./node_modules/react'),
-
-                    // same goes for js-sdk
-                    "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
-
-                    sinon: 'sinon/pkg/sinon.js',
-                },
-                root: [
-                    path.resolve('./src'),
-                    path.resolve('./test'),
-                ],
-            },
-            plugins: [
-                // olm may not be installed, so avoid webpack warnings by
-                // ignoring it.
-                new webpack.IgnorePlugin(/^olm$/),
-            ],
-            devtool: 'inline-source-map',
-        },
-    });
-};
--- a/package.json
+++ b/package.json
@@ -1,95 +1,41 @@
 {
-  "name": "vector-web",
-  "version": "0.8.3",
-  "description": "Vector webapp",
+  "name": "matrix-react-sdk",
+  "version": "0.0.2",
+  "description": "SDK for matrix.org using React",
  "author": "matrix.org",
  "repository": {
    "type": "git",
-    "url": "https://github.com/vector-im/vector-web"
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
  },
  "license": "Apache-2.0",
-  "style": "bundle.css",
-  "matrix-react-parent": "matrix-react-sdk",
+  "main": "lib/index.js",
+  "bin": {
+    "reskindex": "./reskindex.js"
+  },
  "scripts": {
-    "reskindex": "reskindex -h src/header",
-    "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/",
-    "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
-    "build:compile": "babel --source-maps -d lib src",
-    "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
-    "build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
-    "build:staticfiles": "cpx -v node_modules/olm/olm.js vector/",
-    "build": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle",
-    "build:dev": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle:dev",
-    "package": "scripts/package.sh",
-    "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
-    "start:js": "webpack -w src/vector/index.js vector/bundle.js",
-    "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",
-    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
-    "start:staticfiles": "cpx -Lwv node_modules/olm/olm.js vector/",
-    "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
-    "start": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "start:prod": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css* vector/emojione",
-    "prepublish": "npm run build:css && npm run build:compile",
-    "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
-    "test:multi": "karma start"
+    "build": "babel src -d lib --source-maps",
+    "start": "babel src -w -d lib --source-maps",
+    "clean": "rimraf lib",
+    "prepublish": "npm run build"
  },
  "dependencies": {
-    "babel-polyfill": "^6.5.0",
-    "browser-request": "^0.3.3",
    "classnames": "^2.1.2",
-    "draft-js": "^0.8.1",
-    "extract-text-webpack-plugin": "^0.9.1",
    "filesize": "^3.1.2",
-    "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
-    "gfm.css": "^1.1.1",
-    "highlight.js": "^9.0.0",
-    "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.6.3",
-    "matrix-react-sdk": "0.7.4",
-    "modernizr": "^3.1.0",
+    "flux": "^2.0.3",
+    "glob": "^5.0.14",
+    "linkifyjs": "^2.0.0-beta.4",
+    "matrix-js-sdk": "^0.3.0",
+    "optimist": "^0.6.1",
    "q": "^1.4.1",
-    "react": "^15.2.1",
-    "react-dnd": "^2.1.4",
-    "react-dnd-html5-backend": "^2.1.2",
-    "react-dom": "^15.2.1",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
-    "sanitize-html": "^1.11.1",
-    "ua-parser-js": "^0.7.10",
-    "url": "^0.11.0"
+    "react": "^0.13.3",
+    "react-loader": "^1.4.0"
  },
+  "//deps": "The loader packages are here because webpack in a project that depends on us needs them in this package's node_modules folder",
+  "//depsbuglink": "https://github.com/webpack/webpack/issues/1472",
  "devDependencies": {
    "babel": "^5.8.23",
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
-    "catw": "^1.0.1",
-    "cpx": "^1.3.2",
-    "css-raw-loader": "^0.1.1",
-    "emojione": "^2.2.3",
-    "expect": "^1.16.0",
-    "fs-extra": "^0.30.0",
-    "http-server": "^0.8.4",
-    "json-loader": "^0.5.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
-    "karma-junit-reporter": "^0.4.1",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.4.5",
-    "parallelshell": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.7",
-    "react-addons-perf": "^15.0",
-    "react-addons-test-utils": "^15.0.1",
    "rimraf": "^2.4.3",
-    "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.14"
-  },
-  "optionalDependencies": {
-    "olm": "https://matrix.org/packages/npm/olm/olm-1.3.0.tgz"
+    "json-loader": "^0.5.3",
+    "source-map-loader": "^0.1.5"
  }
 }
--- a/release.sh
+++ b/release.sh
@@ -1,12 +0,0 @@
-#!/bin/sh
-#
-# Script to perform a release of vector-web.
-#
-# Requires github-changelog-generator; to install, do 
-#   pip install git+https://github.com/matrix-org/github-changelog-generator.git
-
-set -e
-
-cd `dirname $0`
-
-exec ./node_modules/matrix-js-sdk/release.sh -z "$@"
--- a/reskindex.js
+++ b/reskindex.js
@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+
+var fs = require('fs');
+var path = require('path');
+var glob = require('glob');
+
+var args = require('optimist').argv;
+
+var header = args.h || args.header;
+
+if (args._.length == 0) {
+    console.log("No skin given");
+    process.exit(1);
+}
+
+var skin = args._[0];
+
+try {
+    fs.accessSync(path.join('src', 'skins', skin), fs.F_OK);
+} catch (e) {
+    console.log("Skin "+skin+" not found");
+    process.exit(1);
+}
+
+var skinfoFile = path.join('src', 'skins', skin, 'skinfo.json');
+
+try {
+    fs.accessSync(skinfoFile, fs.F_OK);
+} catch (e) {
+    console.log("Skin "+skin+" has no skinfo.json");
+    process.exit(1);
+}
+
+try {
+    fs.accessSync(path.join('src', 'skins', skin, 'views'), fs.F_OK);
+} catch (e) {
+    console.log("Skin "+skin+" has no views directory");
+    process.exit(1);
+}
+
+var skindex = path.join('src', 'skins', skin, 'skindex.js');
+var viewsDir = path.join('src', 'skins', skin, 'views');
+
+var strm = fs.createWriteStream(skindex);
+
+if (header) {
+   strm.write(fs.readFileSync(header));
+   strm.write('\n');
+}
+
+strm.write("/*\n");
+strm.write(" * THIS FILE IS AUTO-GENERATED\n");
+strm.write(" * You can edit it you like, but your changes will be overwritten,\n");
+strm.write(" * so you'd just be trying to swim upstream like a salmon.\n");
+strm.write(" * You are not a salmon.\n");
+strm.write(" */\n\n");
+
+var mySkinfo = JSON.parse(fs.readFileSync(skinfoFile, "utf8"));
+
+strm.write("var skin = {};\n");
+strm.write('\n');
+
+var files = glob.sync('**/*.js', {cwd: viewsDir});
+for (var i = 0; i < files.length; ++i) {
+    var file = files[i].replace('.js', '');
+    var module = (file.replace(/\//g, '.'));
+
+    strm.write("skin['"+module+"'] = require('./views/"+file+"');\n");
+    strm.uncork();
+}
+
+strm.write("\n");
+
+if (mySkinfo.baseSkin) {
+    strm.write("module.exports = require('"+mySkinfo.baseSkin+"');");
+    strm.write("var extend = require('matrix-react-sdk/lib/extend');\n");
+    strm.write("extend(module.exports, skin);\n");
+} else {
+    strm.write("module.exports = skin;");
+}
+
+strm.end();
+
--- a/scripts/issues-burndown.pl
+++ b/scripts/issues-burndown.pl
@@ -1,124 +0,0 @@
-#!/usr/bin/env perl
-
-use warnings;
-use strict;
-
-use Net::GitHub;
-use DateTime;
-use DateTime::Format::ISO8601;
-
-my $gh = Net::GitHub->new(
-    login => 'ara4n', pass => 'secret'
-);
-
-$gh->set_default_user_repo('vector-im', 'vector-web'); 
-
-my @issues = $gh->issue->repos_issues({ state => 'all', milestone => 3 });
-while ($gh->issue->has_next_page) {
-    push @issues, $gh->issue->next_page;
-}
-
-# we want:
-# day by day:
-# split by { open, closed }
-# split by { bug, feature, neither }
-# each split by { p1, p2, p3, p4, p5, unprioritised }  <- priority
-# each split by { minor, major, critical, cosmetic, network, no-severity }  <- severity
-# then split (with overlap between the groups) as { total, tag1, tag2, ... }?
-
-# ...and then all over again split by milestone.
-
-my $days = {};
-my $schema = {};
-my $now = DateTime->now();
-
-foreach my $issue (@issues) {
-    next if ($issue->{pull_request});
-    
-    # use Data::Dumper;
-    # print STDERR Dumper($issue);
-
-    my @label_list = map { $_->{name} } @{$issue->{labels}};
-    my $labels = {};
-    $labels->{$_} = 1 foreach (@label_list);
-    $labels->{bug}++ if ($labels->{cosmetic} && !$labels->{bug} && !$labels->{feature});
-
-    my $extract_labels = sub {
-        my $label = undef;
-        foreach (@_) {
-            $label ||= $_ if (delete $labels->{$_});
-        }
-        return $label;
-    };
-
-    my $state = $issue->{state};
-    my $type = &$extract_labels(qw(bug feature)) || "neither";
-    my $priority = &$extract_labels(qw(p1 p2 p3 p4 p5)) || "unprioritised";
-    my $severity = &$extract_labels(qw(minor major critical cosmetic network)) || "no-severity";
-
-    my $start = DateTime::Format::ISO8601->parse_datetime($issue->{created_at});
-
-    do {
-        my $ymd = $start->ymd();
-
-        $days->{ $ymd }->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
-        $schema->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
-        foreach (keys %$labels) {
-            $days->{ $ymd }->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-            $schema->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-        }
-
-        $start = $start->add(days => 1);
-    } while (DateTime->compare($start, $now) < 0);
-
-    if ($state eq 'closed') {
-        my $end = DateTime::Format::ISO8601->parse_datetime($issue->{closed_at});
-        do {
-            my $ymd = $end->ymd();
-
-            $days->{ $ymd }->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
-            $schema->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
-            foreach (keys %$labels) {
-                $days->{ $ymd }->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-                $schema->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-            }
-
-            $end = $end->add(days => 1);
-        } while (DateTime->compare($end, $now) < 0);
-    }
-}
-
-print "day,";
-foreach my $state (sort keys %{$schema}) {
-    foreach my $type (grep { /^(bug|feature)$/ } sort keys %{$schema->{$state}}) {
-        foreach my $priority (grep { /^(p1|p2)$/ } sort keys %{$schema->{$state}->{$type}}) {
-            foreach my $severity (sort keys %{$schema->{$state}->{$type}->{$priority}}) {
-                # foreach my $tag (sort keys %{$schema->{$state}->{$type}->{$priority}->{$severity}}) {
-                #     print "\"$type\n$priority\n$severity\n$tag\",";
-                # }
-                print "\"$state\n$type\n$priority\n$severity\",";
-            }
-        }
-    }
-}
-print "\n";
-
-foreach my $day (sort keys %$days) {
-    print "$day,";
-    foreach my $state (sort keys %{$schema}) {
-        foreach my $type (grep { /^(bug|feature)$/ } sort keys %{$schema->{$state}}) {
-            foreach my $priority (grep { /^(p1|p2)$/ } sort keys %{$schema->{$state}->{$type}}) {
-                foreach my $severity (sort keys %{$schema->{$state}->{$type}->{$priority}}) {
-                    # foreach my $tag (sort keys %{$schema->{$state}->{$type}->{$priority}->{$severity}}) {
-                    #     print $days->{$day}->{$state}->{$type}->{$priority}->{$severity}->{$tag} || 0;
-                    #     print ",";
-                    # }
-                    print $days->{$day}->{$state}->{$type}->{$priority}->{$severity}->{total} || 0;
-                    print ",";
-                }
-            }
-        }
-    }
-    print "\n";
-}
-
--- a/scripts/issues-no-state.pl
+++ b/scripts/issues-no-state.pl
@@ -1,104 +0,0 @@
-#!/usr/bin/env perl
-
-use warnings;
-use strict;
-
-use Net::GitHub;
-use DateTime;
-use DateTime::Format::ISO8601;
-
-my $gh = Net::GitHub->new(
-    login => 'ara4n', pass => 'secret'
-);
-
-$gh->set_default_user_repo('vector-im', 'vector-web'); 
-
-my @issues = $gh->issue->repos_issues({ state => 'all', milestone => 3 });
-while ($gh->issue->has_next_page) {
-    push @issues, $gh->issue->next_page;
-}
-
-# we want:
-# day by day:
-# split by { open, closed }
-# split by { bug, feature, neither }
-# each split by { p1, p2, p3, p4, p5, unprioritised }  <- priority
-# each split by { minor, major, critical, cosmetic, network, no-severity }  <- severity
-# then split (with overlap between the groups) as { total, tag1, tag2, ... }?
-
-# ...and then all over again split by milestone.
-
-my $days = {};
-my $schema = {};
-my $now = DateTime->now();
-
-foreach my $issue (@issues) {
-    next if ($issue->{pull_request});
-    
-    use Data::Dumper;
-    print STDERR Dumper($issue);
-
-    my @label_list = map { $_->{name} } @{$issue->{labels}};
-    my $labels = {};
-    $labels->{$_} = 1 foreach (@label_list);
-    $labels->{bug}++ if ($labels->{cosmetic} && !$labels->{bug} && !$labels->{feature});
-
-    my $extract_labels = sub {
-        my $label = undef;
-        foreach (@_) {
-            $label ||= $_ if (delete $labels->{$_});
-        }
-        return $label;
-    };
-
-    my $type = &$extract_labels(qw(bug feature)) || "neither";
-    my $priority = &$extract_labels(qw(p1 p2 p3 p4 p5)) || "unprioritised";
-    my $severity = &$extract_labels(qw(minor major critical cosmetic network)) || "no-severity";
-
-    my $start = DateTime::Format::ISO8601->parse_datetime($issue->{created_at});
-    my $end = $issue->{closed_at} ? DateTime::Format::ISO8601->parse_datetime($issue->{closed_at}) : $now;
-
-    do {
-        my $ymd = $start->ymd();
-
-        $days->{ $ymd }->{ $type }->{ $priority }->{ $severity }->{ total }++;
-        $schema->{ $type }->{ $priority }->{ $severity }->{ total }++;
-        foreach (keys %$labels) {
-            $days->{ $ymd }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-            $schema->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
-        }
-
-        $start = $start->add(days => 1);
-    } while (DateTime->compare($start, $end) < 0);
-}
-
-print "day,";
-foreach my $type (sort keys %{$schema}) {
-    foreach my $priority (sort keys %{$schema->{$type}}) {
-        foreach my $severity (sort keys %{$schema->{$type}->{$priority}}) {
-            # foreach my $tag (sort keys %{$schema->{$type}->{$priority}->{$severity}}) {
-            #     print "\"$type\n$priority\n$severity\n$tag\",";
-            # }
-            print "\"$type\n$priority\n$severity\",";
-        }
-    }
-}
-print "\n";
-
-foreach my $day (sort keys %$days) {
-    print "$day,";
-    foreach my $type (sort keys %{$schema}) {
-        foreach my $priority (sort keys %{$schema->{$type}}) {
-            foreach my $severity (sort keys %{$schema->{$type}->{$priority}}) {
-                # foreach my $tag (sort keys %{$schema->{$type}->{$priority}->{$severity}}) {
-                #     print $days->{$day}->{$type}->{$priority}->{$severity}->{$tag} || 0;
-                #     print ",";
-                # }
-                print $days->{$day}->{$type}->{$priority}->{$severity}->{total} || 0;
-                print ",";
-            }
-        }
-    }
-    print "\n";
-}
-
--- a/scripts/package.sh
+++ b/scripts/package.sh
@@ -1,15 +0,0 @@
-#!/bin/sh
-
-set -e
-
-version=`git describe --dirty --tags || echo unknown`
-
-npm run build
-mkdir -p packages
-cp -r vector vector-$version
-echo $version > vector-$version/version
-tar chvzf packages/vector-$version.tar.gz vector-$version
-rm -r vector-$version
-
-echo
-echo "Packaged packages/vector-$version.tar.gz"
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -0,0 +1,308 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ * Manages a list of all the currently active calls.
+ *
+ * This handler dispatches when voip calls are added/updated/removed from this list:
+ * {
+ *   action: 'call_state'
+ *   room_id: <room ID of the call>
+ * }
+ *
+ * To know the state of the call, this handler exposes a getter to
+ * obtain the call for a room:
+ *   var call = CallHandler.getCall(roomId)
+ *   var state = call.call_state; // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
+ *
+ * This handler listens for and handles the following actions:
+ * {
+ *   action: 'place_call',
+ *   type: 'voice|video',
+ *   room_id: <room that the place call button was pressed in>
+ * }
+ *
+ * {
+ *   action: 'incoming_call'
+ *   call: MatrixCall
+ * }
+ *
+ * {
+ *   action: 'hangup'
+ *   room_id: <room that the hangup button was pressed in>
+ * }
+ *
+ * {
+ *   action: 'answer'
+ *   room_id: <room that the answer button was pressed in>
+ * }
+ */
+
+var MatrixClientPeg = require('./MatrixClientPeg');
+var Modal = require('./Modal');
+var sdk = require('./index');
+var Matrix = require("matrix-js-sdk");
+var dis = require("./dispatcher");
+var Modulator = require("./Modulator");
+
+global.mxCalls = {
+    //room_id: MatrixCall
+};
+var calls = global.mxCalls;
+
+function play(audioId) {
+    // TODO: Attach an invisible element for this instead
+    // which listens?
+    var audio = document.getElementById(audioId);
+    if (audio) {
+        audio.load();
+        audio.play();
+    }
+}
+
+function pause(audioId) {
+    // TODO: Attach an invisible element for this instead
+    // which listens?
+    var audio = document.getElementById(audioId);
+    if (audio) {
+        audio.pause();
+    }
+}
+
+function _setCallListeners(call) {
+    call.on("error", function(err) {
+        console.error("Call error: %s", err);
+        console.error(err.stack);
+        call.hangup();
+        _setCallState(undefined, call.roomId, "ended");
+    });
+    call.on("hangup", function() {
+        _setCallState(undefined, call.roomId, "ended");
+    });
+    // map web rtc states to dummy UI state
+    // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
+    call.on("state", function(newState, oldState) {
+        if (newState === "ringing") {
+            _setCallState(call, call.roomId, "ringing");
+            pause("ringbackAudio");
+        }
+        else if (newState === "invite_sent") {
+            _setCallState(call, call.roomId, "ringback");
+            play("ringbackAudio");
+        }
+        else if (newState === "ended" && oldState === "connected") {
+            _setCallState(undefined, call.roomId, "ended");
+            pause("ringbackAudio");
+            play("callendAudio");
+        }
+        else if (newState === "ended" && oldState === "invite_sent" &&
+                (call.hangupParty === "remote" ||
+                (call.hangupParty === "local" && call.hangupReason === "invite_timeout")
+                )) {
+            _setCallState(call, call.roomId, "busy");
+            pause("ringbackAudio");
+            play("busyAudio");
+            var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Call Timeout",
+                description: "The remote side failed to pick up."
+            });
+        }
+        else if (oldState === "invite_sent") {
+            _setCallState(call, call.roomId, "stop_ringback");
+            pause("ringbackAudio");
+        }
+        else if (oldState === "ringing") {
+            _setCallState(call, call.roomId, "stop_ringing");
+            pause("ringbackAudio");
+        }
+        else if (newState === "connected") {
+            _setCallState(call, call.roomId, "connected");
+            pause("ringbackAudio");
+        }
+    });
+}
+
+function _setCallState(call, roomId, status) {
+    console.log(
+        "Call state in %s changed to %s (%s)", roomId, status, (call ? call.state : "-")
+    );
+    calls[roomId] = call;
+    if (call) {
+        call.call_state = status;
+    }
+    dis.dispatch({
+        action: 'call_state',
+        room_id: roomId
+    });
+}
+
+function _onAction(payload) {
+    function placeCall(newCall) {
+        _setCallListeners(newCall);
+        _setCallState(newCall, newCall.roomId, "ringback");
+        if (payload.type === 'voice') {
+            newCall.placeVoiceCall();
+        }
+        else if (payload.type === 'video') {
+            newCall.placeVideoCall(
+                payload.remote_element,
+                payload.local_element
+            );
+        }
+        else if (payload.type === 'screensharing') {
+            newCall.placeScreenSharingCall(
+                payload.remote_element,
+                payload.local_element
+            );
+        }
+        else {
+            console.error("Unknown conf call type: %s", payload.type);
+        }
+    }
+
+    switch (payload.action) {
+        case 'place_call':
+            if (module.exports.getAnyActiveCall()) {
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Existing Call",
+                    description: "You are already in a call."
+                });
+                return; // don't allow >1 call to be placed.
+            }
+            var 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) {
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    description: "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);
+                var 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 (!Modulator.hasConferenceHandler()) {
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    description: "Conference calls are not supported in this client"
+                });
+            } else {
+                var ConferenceHandler = Modulator.getConferenceHandler();
+                ConferenceHandler.createNewMatrixCall(
+                    MatrixClientPeg.get(), payload.room_id
+                ).done(function(call) {
+                    placeCall(call);
+                }, function(err) {
+                    console.error("Failed to setup conference call: %s", err);
+                });
+            }
+            break;
+        case 'incoming_call':
+            if (module.exports.getAnyActiveCall()) {
+                payload.call.hangup("busy");
+                return; // don't allow >1 call to be received, hangup newer one.
+            }
+            var call = payload.call;
+            _setCallListeners(call);
+            _setCallState(call, call.roomId, "ringing");
+            break;
+        case 'hangup':
+            if (!calls[payload.room_id]) {
+                return; // no call to hangup
+            }
+            calls[payload.room_id].hangup();
+            _setCallState(null, payload.room_id, "ended");
+            break;
+        case 'answer':
+            if (!calls[payload.room_id]) {
+                return; // no call to answer
+            }
+            calls[payload.room_id].answer();
+            _setCallState(calls[payload.room_id], payload.room_id, "connected");
+            dis.dispatch({
+                action: "view_room",
+                room_id: payload.room_id
+            });
+            break;
+    }
+}
+// FIXME: Nasty way of making sure we only register
+// with the dispatcher once
+if (!global.mxCallHandler) {
+    dis.register(_onAction);
+}
+
+var callHandler = {
+    getCallForRoom: function(roomId) {
+        var call = module.exports.getCall(roomId);
+        if (call) return call;
+
+        if (Modulator.hasConferenceHandler()) {
+            var ConferenceHandler = Modulator.getConferenceHandler();
+            call = ConferenceHandler.getConferenceCallForRoom(roomId);
+        }
+        if (call) return call;
+
+        return null;
+    },
+
+    getCall: function(roomId) {
+        return calls[roomId] || null;
+    },
+
+    getAnyActiveCall: function() {
+        var roomsWithCalls = Object.keys(calls);
+        for (var i = 0; i < roomsWithCalls.length; i++) {
+            if (calls[roomsWithCalls[i]] &&
+                    calls[roomsWithCalls[i]].call_state !== "ended") {
+                return calls[roomsWithCalls[i]];
+            }
+        }
+        return null;
+    }
+};
+// Only things in here which actually need to be global are the
+// calls list (done separately) and making sure we only register
+// with the dispatcher once (which uses this mechanism but checks
+// separately). This could be tidied up.
+if (global.mxCallHandler === undefined) {
+    global.mxCallHandler = callHandler;
+}
+
+module.exports = global.mxCallHandler;
--- a/src/notifications/index.js
+++ b/src/notifications/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,9 +16,13 @@ limitations under the License.

 'use strict';

+var url = require ('url');
+
+function getServiceUrl() {
+    var parsedUrl = url.parse(window.location.href);
+    return parsedUrl.protocol + "//" + parsedUrl.host + parsedUrl.pathname;
+}
+
 module.exports = {
-    NotificationUtils: require('./NotificationUtils'),
-    PushRuleVectorState: require('./PushRuleVectorState'),
-    VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'),
-    ContentRules: require('./ContentRules'),
+    getServiceUrl: getServiceUrl
 };
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -0,0 +1,86 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var q = require('q');
+var extend = require('./extend');
+
+function infoForImageFile(imageFile) {
+    var deferred = q.defer();
+
+    // Load the file into an html element
+    var img = document.createElement("img");
+
+    var reader = new FileReader();
+    reader.onload = function(e) {
+        img.src = e.target.result;
+
+        // Once ready, returns its size
+        img.onload = function() {
+            deferred.resolve({
+                w: img.width,
+                h: img.height
+            });
+        };
+        img.onerror = function(e) {
+            deferred.reject(e);
+        };
+    };
+    reader.onerror = function(e) {
+        deferred.reject(e);
+    };
+    reader.readAsDataURL(imageFile);
+
+    return deferred.promise;
+}
+
+function sendContentToRoom(file, roomId, matrixClient) {
+    var content = {
+        body: file.name,
+        info: {
+            size: file.size,
+        }
+    };
+
+    // if we have a mime type for the file, add it to the message metadata
+    if (file.type) {
+        content.info.mimetype = file.type;
+    }
+
+    var def = q.defer();
+    if (file.type.indexOf('image/') == 0) {
+        content.msgtype = 'm.image';
+        infoForImageFile(file).then(function(imageInfo) {
+            extend(content.info, imageInfo);
+            def.resolve();
+        });
+    } else {
+        content.msgtype = 'm.file';
+        def.resolve();
+    }
+
+    return def.promise.then(function() {
+        return matrixClient.uploadContent(file);
+    }).then(function(url) {
+        content.url = url;
+        return matrixClient.sendMessage(roomId, content);
+    });
+}
+
+module.exports = {
+    sendContentToRoom: sendContentToRoom
+};
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -0,0 +1,105 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+// A thing that holds your Matrix Client
+var Matrix = require("matrix-js-sdk");
+
+var matrixClient = null;
+
+var localStorage = window.localStorage;
+
+function deviceId() {
+    var id = Math.floor(Math.random()*16777215).toString(16);
+    id = "W" + "000000".substring(id.length) + id;
+    if (localStorage) {
+        id = localStorage.getItem("mx_device_id") || id;
+        localStorage.setItem("mx_device_id", id);
+    }
+    return id;
+}
+
+function createClient(hs_url, is_url, user_id, access_token) {
+    var opts = {
+        baseUrl: hs_url,
+        idBaseUrl: is_url,
+        accessToken: access_token,
+        userId: user_id
+    };
+
+    if (localStorage) {
+        opts.sessionStore = new Matrix.WebStorageSessionStore(localStorage);
+        opts.deviceId = deviceId();
+    }
+
+    matrixClient = Matrix.createClient(opts);
+}
+
+if (localStorage) {
+    var hs_url = localStorage.getItem("mx_hs_url");
+    var is_url = localStorage.getItem("mx_is_url") || 'https://matrix.org';
+    var access_token = localStorage.getItem("mx_access_token");
+    var user_id = localStorage.getItem("mx_user_id");
+    if (access_token && user_id && hs_url) {
+        createClient(hs_url, is_url, user_id, access_token);
+    }
+}
+
+class MatrixClient {
+    get() {
+        return matrixClient;
+    }
+
+    unset() {
+        matrixClient = null;
+    }
+
+    replaceUsingUrls(hs_url, is_url) {
+        matrixClient = Matrix.createClient({
+            baseUrl: hs_url,
+            idBaseUrl: is_url
+        });
+    }
+
+    replaceUsingAccessToken(hs_url, is_url, user_id, access_token) {
+        if (localStorage) {
+            try {
+                localStorage.clear();
+            } catch (e) {
+                console.warn("Error using local storage");
+            }
+        }
+        createClient(hs_url, is_url, user_id, access_token);
+        if (localStorage) {
+            try {
+                localStorage.setItem("mx_hs_url", hs_url);
+                localStorage.setItem("mx_is_url", is_url);
+                localStorage.setItem("mx_user_id", user_id);
+                localStorage.setItem("mx_access_token", access_token);
+            } catch (e) {
+                console.warn("Error using local storage: can't persist session!");
+            }
+        } else {
+            console.warn("No local storage available: can't persist session!");
+        }
+    }
+}
+
+if (!global.mxMatrixClient) {
+    global.mxMatrixClient = new MatrixClient();
+}
+module.exports = global.mxMatrixClient;
--- a/src/MatrixTools.js
+++ b/src/MatrixTools.js
@@ -0,0 +1,61 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+module.exports = {
+    /**
+     * Given a room object, return the canonical alias for it
+     * if there is one. Otherwise return null;
+     */
+    getCanonicalAliasForRoom: function(room) {
+        var aliasEvents = room.currentState.getStateEvents(
+            "m.room.aliases"
+        );
+        // Canonical aliases aren't implemented yet, so just return the first
+        for (var j = 0; j < aliasEvents.length; j++) {
+            var aliases = aliasEvents[j].getContent().aliases;
+            if (aliases && aliases.length) {
+                return aliases[0];
+            }
+        }
+        return null;
+    },
+
+    /**
+     * Given a list of room objects, return the room which has the given alias,
+     * else null.
+     */
+    getRoomForAlias: function(rooms, room_alias) {
+        var room;
+        for (var i = 0; i < rooms.length; i++) {
+            var aliasEvents = rooms[i].currentState.getStateEvents(
+                "m.room.aliases"
+            );
+            for (var j = 0; j < aliasEvents.length; j++) {
+                var aliases = aliasEvents[j].getContent().aliases || [];
+                for (var k = 0; k < aliases.length; k++) {
+                    if (aliases[k] === room_alias) {
+                        room = rooms[i];
+                        break;
+                    }
+                }
+                if (room) { break; }
+            }
+            if (room) { break; }
+        }
+        return room || null;
+    }
+}
+
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -0,0 +1,84 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+'use strict';
+
+var React = require('react');
+
+module.exports = {
+    DialogContainerId: "mx_Dialog_Container",
+
+    getOrCreateContainer: function() {
+        var container = document.getElementById(this.DialogContainerId);
+
+        if (!container) {
+            container = document.createElement("div");
+            container.id = this.DialogContainerId;
+            document.body.appendChild(container);
+        }
+
+        return container;
+    },
+
+    createDialogWithElement: function(element, props) {
+        var self = this;
+
+        var closeDialog = function() {
+            React.unmountComponentAtNode(self.getOrCreateContainer());
+
+            if (props && props.onFinished) props.onFinished.apply(null, arguments);
+        };
+
+        var dialog = (
+            <div className="mx_Dialog_wrapper">
+                <div className="mx_Dialog">
+                    {element}
+                </div>
+                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+            </div>
+        );
+
+        React.render(dialog, this.getOrCreateContainer());
+
+        return {close: closeDialog};
+    },
+
+    createDialog: function (Element, props) {
+        var self = this;
+
+        var closeDialog = function() {
+            React.unmountComponentAtNode(self.getOrCreateContainer());
+
+            if (props && props.onFinished) props.onFinished.apply(null, arguments);
+        };
+
+        // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
+        // property set here so you can't close the dialog from a button click!
+        var dialog = (
+            <div className="mx_Dialog_wrapper">
+                <div className="mx_Dialog">
+                    <Element {...props} onFinished={closeDialog}/>
+                </div>
+                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+            </div>
+        );
+
+        React.render(dialog, this.getOrCreateContainer());
+
+        return {close: closeDialog};
+    },
+};
--- a/src/Modulator.js
+++ b/src/Modulator.js
@@ -0,0 +1,111 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * The modulator stores 'modules': classes that provide
+ * functionality and are not React UI components.
+ * Modules go into named slots, eg. a conference calling
+ * module goes into the 'conference' slot. If two modules
+ * that use the same slot are loaded, this is considered
+ * to be an error.
+ *
+ * There are some module slots that the react SDK knows
+ * about natively: these have explicit getters.
+ *
+ * A module must define:
+ *  - 'slot' (string): The name of the slot it goes into
+ * and may define:
+ *  - 'start' (function): Called on module load
+ *  - 'stop' (function): Called on module unload
+ */
+class Modulator {
+    constructor() {
+        this.modules = {};
+    }
+
+    getModule(name) {
+        var m = this.getModuleOrNull(name);
+        if (m === null) {
+            throw new Error("No such module: "+name);
+        }
+        return m;
+    }
+
+    getModuleOrNull(name) {
+        if (this.modules == {}) {
+            throw new Error(
+                "Attempted to get a module before a skin has been loaded."+
+                "This is probably because a component has called "+
+                "getModule at the root level."
+            );
+        }
+        var module = this.modules[name];
+        if (module) {
+            return module;
+        }
+        return null;
+    }
+
+    hasModule(name) {
+        var m = this.getModuleOrNull(name);
+        return m !== null;
+    }
+
+    loadModule(moduleObject) {
+        if (!moduleObject.slot) {
+            throw new Error(
+                "Attempted to load something that is not a module "+
+                "(does not have a slot name)"
+            );
+        }
+        if (this.modules[moduleObject.slot] !== undefined) {
+            throw new Error(
+                "Cannot load module: slot '"+moduleObject.slot+"' is occupied!"
+            );
+        }
+        this.modules[moduleObject.slot] = moduleObject;
+    }
+
+    reset() {
+        var keys = Object.keys(this.modules);
+        for (var i = 0; i < keys.length; ++i) {
+            var k = keys[i];
+            var m = this.modules[k];
+
+            if (m.stop) m.stop();
+        }
+        this.modules = {};
+    }
+
+    // ***********
+    // known slots
+    // ***********
+
+    getConferenceHandler() {
+        return this.getModule('conference');
+    }
+
+    hasConferenceHandler() {
+        return this.hasModule('conference');
+    }
+}
+
+// Define one Modulator globally (see Skinner.js)
+if (global.mxModulator === undefined) {
+    global.mxModulator = new Modulator();
+}
+module.exports = global.mxModulator;
+
--- a/src/Presence.js
+++ b/src/Presence.js
@@ -0,0 +1,107 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("./MatrixClientPeg");
+
+ // Time in ms after that a user is considered as unavailable/away
+var UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
+var PRESENCE_STATES = ["online", "offline", "unavailable"];
+
+// The current presence state
+var state, timer;
+
+module.exports = {
+
+    /**
+     * Start listening the user activity to evaluate his presence state.
+     * Any state change will be sent to the Home Server.
+     */
+    start: function() {
+        var self = this;
+        this.running = true;
+        if (undefined === state) {
+            // The user is online if they move the mouse or press a key
+            document.onmousemove = function() { self._resetTimer(); };
+            document.onkeypress = function() { self._resetTimer(); };
+            this._resetTimer();
+        }
+    },
+
+    /**
+     * Stop tracking user activity
+     */
+    stop: function() {
+        this.running = false;
+        if (timer) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+        state = undefined;
+    },
+
+    /**
+     * Get the current presence state.
+     * @returns {string} the presence state (see PRESENCE enum)
+     */
+    getState: function() {
+        return state;
+    },
+
+    /**
+     * Set the presence state.
+     * If the state has changed, the Home Server will be notified.
+     * @param {string} newState the new presence state (see PRESENCE enum)
+     */
+    setState: function(newState) {
+        if (newState === state) {
+            return;
+        }
+        if (PRESENCE_STATES.indexOf(newState) === -1) {
+            throw new Error("Bad presence state: " + newState);
+        }
+        if (!this.running) {
+            return;
+        }
+        state = newState;
+        MatrixClientPeg.get().setPresence(state).done(function() {
+            console.log("Presence: %s", newState);
+        }, function(err) {
+            console.error("Failed to set presence: %s", err);
+        });
+    },
+
+    /**
+     * Callback called when the user made no action on the page for UNAVAILABLE_TIME ms.
+     * @private
+     */
+    _onUnavailableTimerFire: function() {
+        this.setState("unavailable");
+    },
+
+    /**
+     * Callback called when the user made an action on the page
+     * @private
+     */
+    _resetTimer: function() {
+        var self = this;
+        this.setState("online");
+        // Re-arm the timer
+        clearTimeout(timer);
+        timer = setTimeout(function() {
+            self._onUnavailableTimerFire();
+        }, UNAVAILABLE_TIME_MS);
+    } 
+};
--- a/src/RoomListSorter.js
+++ b/src/RoomListSorter.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+function tsOfNewestEvent(room) {
+    if (room.timeline.length) {
+        return room.timeline[room.timeline.length - 1].getTs();
+    }
+    else {
+        return Number.MAX_SAFE_INTEGER;
+    }
+}
+
+function mostRecentActivityFirst(roomList) {
+    return roomList.sort(function(a,b) {
+        return tsOfNewestEvent(b) - tsOfNewestEvent(a);
+    });
+}
+
+module.exports = {
+    mostRecentActivityFirst: mostRecentActivityFirst
+};
--- a/src/Skinner.js
+++ b/src/Skinner.js
@@ -0,0 +1,63 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+class Skinner {
+    constructor() {
+        this.components = null;
+    }
+
+    getComponent(name) {
+        if (this.components === null) {
+            throw new Error(
+                "Attempted to get a component before a skin has been loaded."+
+                "This is probably because either:"+
+                " a) Your app has not called sdk.loadSkin(), or"+
+                " b) A component has called getComponent at the root level"
+            );
+        }
+        var comp = this.components[name];
+        if (comp) {
+            return comp;
+        }
+        throw new Error("No such component: "+name);
+    }
+
+    load(skinObject) {
+        if (this.components !== null) {
+            throw new Error(
+                "Attempted to load a skin while a skin is already loaded"+
+                "If you want to change the active skin, call resetSkin first"
+            );
+        }
+        this.components = skinObject;
+    }
+
+    reset() {
+        this.components = null;
+    }
+}
+
+// We define one Skinner globally, because the intention is
+// very much that it is a singleton. Relying on there only being one
+// copy of the module can be dicey and not work as browserify's
+// behaviour with multiple copies of files etc. is erratic at best.
+// XXX: We can still end up with the same file twice in the resulting
+// JS bundle which is nonideal.
+if (global.mxSkinner === undefined) {
+    global.mxSkinner = new Skinner();
+}
+module.exports = global.mxSkinner;
+
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -0,0 +1,299 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("./MatrixClientPeg");
+var MatrixTools = require("./MatrixTools");
+var dis = require("./dispatcher");
+var encryption = require("./encryption");
+
+var reject = function(msg) {
+    return {
+        error: msg
+    };
+};
+
+var success = function(promise) {
+    return {
+        promise: promise
+    };
+};
+
+var commands = {
+    // Change your nickname
+    nick: function(room_id, args) {
+        if (args) {
+            return success(
+                MatrixClientPeg.get().setDisplayName(args)
+            );
+        }
+        return reject("Usage: /nick <display_name>");
+    },
+
+    encrypt: function(room_id, args) {
+        if (args == "on") {
+            var client = MatrixClientPeg.get();
+            var members = client.getRoom(room_id).currentState.members;
+            var user_ids = Object.keys(members);
+            return success(
+                encryption.enableEncryption(client, room_id, user_ids)
+            );
+        }
+        if (args == "off") {
+            var client = MatrixClientPeg.get();
+            return success(
+                encryption.disableEncryption(client, room_id)
+            );
+
+        }
+        return reject("Usage: encrypt <on/off>");
+    },
+
+    // Change the room topic
+    topic: function(room_id, args) {
+        if (args) {
+            return success(
+                MatrixClientPeg.get().setRoomTopic(room_id, args)
+            );
+        }
+        return reject("Usage: /topic <topic>");
+    },
+
+    // Invite a user
+    invite: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+)$/);
+            if (matches) {
+                return success(
+                    MatrixClientPeg.get().invite(room_id, matches[1])
+                );
+            }
+        }
+        return reject("Usage: /invite <userId>");
+    },
+
+    // Join a room
+    join: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+)$/);
+            if (matches) {
+                var room_alias = matches[1];
+                if (room_alias[0] !== '#') {
+                    return reject("Usage: /join #alias:domain");
+                }
+                if (!room_alias.match(/:/)) {
+                    var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
+                    room_alias += ':' + domain;
+                }
+
+                // Try to find a room with this alias
+                var foundRoom = MatrixTools.getRoomForAlias(
+                    MatrixClientPeg.get().getRooms(),
+                    room_alias
+                );
+                if (foundRoom) { // we've already joined this room, view it.
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: foundRoom.roomId
+                    });
+                    return success();
+                }
+                else {
+                    // attempt to join this alias.
+                    return success(
+                        MatrixClientPeg.get().joinRoom(room_alias).then(
+                        function(room) {
+                            dis.dispatch({
+                                action: 'view_room',
+                                room_id: room.roomId
+                            });
+                        })
+                    );
+                }
+            }
+        }
+        return reject("Usage: /join <room_alias>");
+    },
+
+    part: function(room_id, args) {
+        var targetRoomId;
+        if (args) {
+            var matches = args.match(/^(\S+)$/);
+            if (matches) {
+                var room_alias = matches[1];
+                if (room_alias[0] !== '#') {
+                    return reject("Usage: /part [#alias:domain]");
+                }
+                if (!room_alias.match(/:/)) {
+                    var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
+                    room_alias += ':' + domain;
+                }
+
+                // Try to find a room with this alias
+                var rooms = MatrixClientPeg.get().getRooms();
+                for (var i = 0; i < rooms.length; i++) {
+                    var aliasEvents = rooms[i].currentState.getStateEvents(
+                        "m.room.aliases"
+                    );
+                    for (var j = 0; j < aliasEvents.length; j++) {
+                        var aliases = aliasEvents[j].getContent().aliases || [];
+                        for (var k = 0; k < aliases.length; k++) {
+                            if (aliases[k] === room_alias) {
+                                targetRoomId = rooms[i].roomId;
+                                break;
+                            }
+                        }
+                        if (targetRoomId) { break; }
+                    }
+                    if (targetRoomId) { break; }
+                }
+            }
+            if (!targetRoomId) {
+                return reject("Unrecognised room alias: " + room_alias);
+            }
+        }
+        if (!targetRoomId) targetRoomId = room_id;
+        return success(
+            MatrixClientPeg.get().leave(targetRoomId).then(
+            function() {
+                dis.dispatch({action: 'view_next_room'});
+            })
+        );
+    },
+
+    // Kick a user from the room with an optional reason
+    kick: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+?)( +(.*))?$/);
+            if (matches) {
+                return success(
+                    MatrixClientPeg.get().kick(room_id, matches[1], matches[3])
+                );
+            }
+        }
+        return reject("Usage: /kick <userId> [<reason>]");
+    },
+
+    // Ban a user from the room with an optional reason
+    ban: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+?)( +(.*))?$/);
+            if (matches) {
+                return success(
+                    MatrixClientPeg.get().ban(room_id, matches[1], matches[3])
+                );
+            }
+        }
+        return reject("Usage: /ban <userId> [<reason>]");
+    },
+
+    // Unban a user from the room
+    unban: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+)$/);
+            if (matches) {
+                // Reset the user membership to "leave" to unban him
+                return success(
+                    MatrixClientPeg.get().unban(room_id, matches[1])
+                );
+            }
+        }
+        return reject("Usage: /unban <userId>");
+    },
+
+    // Define the power level of a user
+    op: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+?)( +(\d+))?$/);
+            var powerLevel = 50; // default power level for op
+            if (matches) {
+                var user_id = matches[1];
+                if (matches.length === 4 && undefined !== matches[3]) {
+                    powerLevel = parseInt(matches[3]);
+                }
+                if (powerLevel !== NaN) {
+                    var room = MatrixClientPeg.get().getRoom(room_id);
+                    if (!room) {
+                        return reject("Bad room ID: " + room_id);
+                    }
+                    var powerLevelEvent = room.currentState.getStateEvents(
+                        "m.room.power_levels", ""
+                    );
+                    return success(
+                        MatrixClientPeg.get().setPowerLevel(
+                            room_id, user_id, powerLevel, powerLevelEvent
+                        )
+                    );
+                }
+            }
+        }
+        return reject("Usage: /op <userId> [<power level>]");
+    },
+
+    // Reset the power level of a user
+    deop: function(room_id, args) {
+        if (args) {
+            var matches = args.match(/^(\S+)$/);
+            if (matches) {
+                var room = MatrixClientPeg.get().getRoom(room_id);
+                if (!room) {
+                    return reject("Bad room ID: " + room_id);
+                }
+
+                var powerLevelEvent = room.currentState.getStateEvents(
+                    "m.room.power_levels", ""
+                );
+                return success(
+                    MatrixClientPeg.get().setPowerLevel(
+                        room_id, args, undefined, powerLevelEvent
+                    )
+                );
+            }
+        }
+        return reject("Usage: /deop <userId>");
+    }
+};
+
+// helpful aliases
+commands.j = commands.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] === "/" && input[1] !== "/") {
+            var bits = input.match(/^(\S+?)( +(.*))?$/);
+            var cmd = bits[1].substring(1).toLowerCase();
+            var args = bits[3];
+            if (cmd === "me") return null;
+            if (commands[cmd]) {
+                return commands[cmd](roomId, args);
+            }
+            else {
+                return reject("Unrecognised command: " + input);
+            }
+        }
+        return null; // not a command
+    }
+};
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -0,0 +1,109 @@
+
+function textForMemberEvent(ev) {
+    // XXX: SYJS-16
+    var senderName = ev.sender ? ev.sender.name : ev.getSender();
+    var targetName = ev.target ? ev.target.name : ev.getStateKey();
+    var reason = ev.getContent().reason ? (
+        " Reason: " + ev.getContent().reason
+    ) : "";
+    switch (ev.getContent().membership) {
+        case 'invite':
+            return senderName + " invited " + targetName + ".";
+        case 'ban':
+            return senderName + " banned " + targetName + "." + reason;
+        case 'join':
+            if (ev.getPrevContent() && ev.getPrevContent().membership == 'join') {
+                if (ev.getPrevContent().displayname && ev.getContent().displayname && ev.getPrevContent().displayname != ev.getContent().displayname) {
+                    return ev.getSender() + " changed their display name from " +
+                        ev.getPrevContent().displayname + " to " +
+                        ev.getContent().displayname;
+                } else if (!ev.getPrevContent().displayname && ev.getContent().displayname) {
+                    return ev.getSender() + " set their display name to " + ev.getContent().displayname;
+                } else if (ev.getPrevContent().displayname && !ev.getContent().displayname) {
+                    return ev.getSender() + " removed their display name";
+                } else if (ev.getPrevContent().avatar_url && !ev.getContent().avatar_url) {
+                    return ev.getSender() + " removed their profile picture";
+                } else if (ev.getPrevContent().avatar_url && ev.getContent().avatar_url && ev.getPrevContent().avatar_url != ev.getContent().avatar_url) {
+                    return ev.getSender() + " changed their profile picture";
+                } else if (!ev.getPrevContent().avatar_url && ev.getContent().avatar_url) {
+                    return ev.getSender() + " set a profile picture";
+                }
+            } else {
+                if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
+                return targetName + " joined the room.";
+            }
+            return '';
+        case 'leave':
+            if (ev.getSender() === ev.getStateKey()) {
+                return targetName + " left the room.";
+            }
+            else if (ev.getPrevContent().membership === "ban") {
+                return senderName + " unbanned " + targetName + ".";
+            }
+            else if (ev.getPrevContent().membership === "join") {
+                return senderName + " kicked " + targetName + "." + reason;
+            }
+            else if (ev.getPrevContent().membership === "invite") {
+                return senderName + " withdrew " + targetName + "'s invitation." + reason;
+            }
+            else {
+                return targetName + " left the room.";
+            }
+    }
+};
+
+function textForTopicEvent(ev) {
+    var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+
+    return senderDisplayName + ' changed the topic to, "' + ev.getContent().topic + '"';
+};
+
+function textForMessageEvent(ev) {
+    var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+
+    var message = senderDisplayName + ': ' + ev.getContent().body;
+    if (ev.getContent().msgtype === "m.emote") {
+        message = "* " + senderDisplayName + " " + message;
+    } else if (ev.getContent().msgtype === "m.image") {
+        message = senderDisplayName + " sent an image.";
+    }
+    return message;
+};
+
+function textForCallAnswerEvent(event) {
+    var senderName = event.sender ? event.sender.name : "Someone";
+    return senderName + " answered the call.";
+};
+
+function textForCallHangupEvent(event) {
+    var senderName = event.sender ? event.sender.name : "Someone";
+    return senderName + " ended the call.";
+};
+
+function textForCallInviteEvent(event) {
+    var senderName = event.sender ? event.sender.name : "Someone";
+    // FIXME: Find a better way to determine this from the event?
+    var type = "voice";
+    if (event.getContent().offer && event.getContent().offer.sdp &&
+            event.getContent().offer.sdp.indexOf('m=video') !== -1) {
+        type = "video";
+    }
+    return senderName + " placed a " + type + " call.";
+};
+
+var handlers = {
+    'm.room.message': textForMessageEvent,
+    'm.room.topic': textForTopicEvent,
+    'm.room.member': textForMemberEvent,
+    'm.call.invite': textForCallInviteEvent,
+    'm.call.answer': textForCallAnswerEvent,
+    'm.call.hangup': textForCallHangupEvent,
+};
+
+module.exports = {
+    textForEvent: function(ev) {
+        var hdlr = handlers[ev.getType()];
+        if (!hdlr) return "";
+        return hdlr(ev);
+    }
+}
--- a/src/VectorConferenceHandler.js
+++ b/src/VectorConferenceHandler.js
@@ -1,135 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-"use strict";
-
-var q = require("q");
-var Matrix = require("matrix-js-sdk");
-var Room = Matrix.Room;
-var CallHandler = require('matrix-react-sdk/lib/CallHandler');
-
-// FIXME: This currently forces Vector to try to hit the matrix.org AS for conferencing.
-// This is bad because it prevents people running their own ASes from being used.
-// This isn't permanent and will be customisable in the future: see the proposal
-// at docs/conferencing.md for more info.
-var USER_PREFIX = "fs_";
-var DOMAIN = "matrix.org";
-
-function ConferenceCall(matrixClient, groupChatRoomId) {
-    this.client = matrixClient;
-    this.groupRoomId = groupChatRoomId;
-    this.confUserId = module.exports.getConferenceUserIdForRoom(this.groupRoomId);
-}
-
-ConferenceCall.prototype.setup = function() {
-    var self = this;
-    return this._joinConferenceUser().then(function() {
-        return self._getConferenceUserRoom();
-    }).then(function(room) {
-        // return a call for *this* room to be placed. We also tack on
-        // confUserId to speed up lookups (else we'd need to loop every room
-        // looking for a 1:1 room with this conf user ID!)
-        var call = Matrix.createNewMatrixCall(self.client, room.roomId);
-        call.confUserId = self.confUserId;
-        call.groupRoomId = self.groupRoomId;
-        return call;
-    });
-};
-
-ConferenceCall.prototype._joinConferenceUser = function() {
-    // Make sure the conference user is in the group chat room
-    var groupRoom = this.client.getRoom(this.groupRoomId);
-    if (!groupRoom) {
-        return q.reject("Bad group room ID");
-    }
-    var member = groupRoom.getMember(this.confUserId);
-    if (member && member.membership === "join") {
-        return q();
-    }
-    return this.client.invite(this.groupRoomId, this.confUserId);
-};
-
-ConferenceCall.prototype._getConferenceUserRoom = function() {
-    // Use an existing 1:1 with the conference user; else make one
-    var rooms = this.client.getRooms();
-    var confRoom = null;
-    for (var i = 0; i < rooms.length; i++) {
-        var confUser = rooms[i].getMember(this.confUserId);
-        if (confUser && confUser.membership === "join" &&
-                rooms[i].getJoinedMembers().length === 2) {
-            confRoom = rooms[i];
-            break;
-        }
-    }
-    if (confRoom) {
-        return q(confRoom);
-    }
-    return this.client.createRoom({
-        preset: "private_chat",
-        invite: [this.confUserId]
-    }).then(function(res) {
-        return new Room(res.room_id);
-    });
-};
-
-/**
- * Check if this user ID is in fact a conference bot.
- * @param {string} userId The user ID to check.
- * @return {boolean} True if it is a conference bot.
- */
-module.exports.isConferenceUser = function(userId) {
-    if (userId.indexOf("@" + USER_PREFIX) !== 0) {
-        return false;
-    }
-    var base64part = userId.split(":")[0].substring(1 + USER_PREFIX.length);
-    if (base64part) {
-        var decoded = new Buffer(base64part, "base64").toString();
-        // ! $STUFF : $STUFF
-        return /^!.+:.+/.test(decoded);
-    }
-    return false;
-};
-
-module.exports.getConferenceUserIdForRoom = function(roomId) {
-    // abuse browserify's core node Buffer support (strip padding ='s)
-    var base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, "");
-    return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN;
-};
-
-module.exports.createNewMatrixCall = function(client, roomId) {
-    var confCall = new ConferenceCall(
-        client, roomId
-    );
-    return confCall.setup();
-};
-
-module.exports.getConferenceCallForRoom = function(roomId) {
-    // search for a conference 1:1 call for this group chat room ID
-    var activeCall = CallHandler.getAnyActiveCall();
-    if (activeCall && activeCall.confUserId) {
-        var thisRoomConfUserId = module.exports.getConferenceUserIdForRoom(
-            roomId
-        );
-        if (thisRoomConfUserId === activeCall.confUserId) {
-            return activeCall;
-        }
-    }
-    return null;
-};
-
-module.exports.ConferenceCall = ConferenceCall;
-
-module.exports.slot = 'conference';
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -0,0 +1,49 @@
+var MatrixClientPeg = require("./MatrixClientPeg");
+
+module.exports = {
+    usersTypingApartFromMe: function(room) {
+        return this.usersTyping(
+            room, [MatrixClientPeg.get().credentials.userId]
+        );
+    },
+
+    /**
+     * Given a Room object and, optionally, a list of userID strings
+     * to exclude, return a list of user objects who are typing.
+     */
+    usersTyping: function(room, exclude) {
+        var whoIsTyping = [];
+
+        if (exclude === undefined) {
+            exclude = [];
+        }
+
+        var memberKeys = Object.keys(room.currentState.members);
+        for (var i = 0; i < memberKeys.length; ++i) {
+            var userId = memberKeys[i];
+
+            if (room.currentState.members[userId].typing) {
+                if (exclude.indexOf(userId) == -1) {
+                    whoIsTyping.push(room.currentState.members[userId]);
+                }
+            }
+        }
+
+        return whoIsTyping;
+    },
+
+    whoIsTypingString: function(room) {
+        var whoIsTyping = this.usersTypingApartFromMe(room);
+        if (whoIsTyping.length == 0) {
+            return null;
+        } else if (whoIsTyping.length == 1) {
+            return whoIsTyping[0].name + ' is typing';
+        } else {
+            var names = whoIsTyping.map(function(m) {
+                return m.name;
+            });
+            var lastPerson = names.shift();
+            return names.join(', ') + ' and ' + lastPerson + ' are typing';
+        }
+    }
+}
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -1,57 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/*
- * THIS FILE IS AUTO-GENERATED
- * You can edit it you like, but your changes will be overwritten,
- * so you'd just be trying to swim upstream like a salmon.
- * You are not a salmon.
- *
- * To update it, run:
- *    ./reskindex.js -h header
- */
-
-module.exports.components = require('matrix-react-sdk/lib/component-index').components;
-
-module.exports.components['structures.BottomLeftMenu'] = require('./components/structures/BottomLeftMenu');
-module.exports.components['structures.CompatibilityPage'] = require('./components/structures/CompatibilityPage');
-module.exports.components['structures.LeftPanel'] = require('./components/structures/LeftPanel');
-module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel');
-module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory');
-module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList');
-module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
-module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
-module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
-module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
-module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
-module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
-module.exports.components['views.directory.NetworkDropdown'] = require('./components/views/directory/NetworkDropdown');
-module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
-module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
-module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
-module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar');
-module.exports.components['views.globals.NewVersionBar'] = require('./components/views/globals/NewVersionBar');
-module.exports.components['views.login.VectorCustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog');
-module.exports.components['views.login.VectorLoginFooter'] = require('./components/views/login/VectorLoginFooter');
-module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
-module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
-module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
-module.exports.components['views.rooms.DNDRoomTile'] = require('./components/views/rooms/DNDRoomTile');
-module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
-module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');
-module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');
-module.exports.components['views.settings.IntegrationsManager'] = require('./components/views/settings/IntegrationsManager');
-module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications');
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -1,124 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-
-module.exports = React.createClass({
-    displayName: 'BottomLeftMenu',
-
-    propTypes: {
-        collapsed: React.PropTypes.bool.isRequired,
-    },
-
-    getInitialState: function() {
-        return({
-            directoryHover : false,
-            roomsHover : false,
-            peopleHover : false,
-            settingsHover : false,
-        });
-    },
-
-    // Room events
-    onDirectoryClick: function() {
-        dis.dispatch({ action: 'view_room_directory' });
-    },
-
-    onDirectoryMouseEnter: function() {
-        this.setState({ directoryHover: true });
-    },
-
-    onDirectoryMouseLeave: function() {
-        this.setState({ directoryHover: false });
-    },
-
-    onRoomsClick: function() {
-        dis.dispatch({ action: 'view_create_room' });
-    },
-
-    onRoomsMouseEnter: function() {
-        this.setState({ roomsHover: true });
-    },
-
-    onRoomsMouseLeave: function() {
-        this.setState({ roomsHover: false });
-    },
-
-    // People events
-    onPeopleClick: function() {
-        dis.dispatch({ action: 'view_create_chat' });
-    },
-
-    onPeopleMouseEnter: function() {
-        this.setState({ peopleHover: true });
-    },
-
-    onPeopleMouseLeave: function() {
-        this.setState({ peopleHover: false });
-    },
-
-    // Settings events
-    onSettingsClick: function() {
-        dis.dispatch({ action: 'view_user_settings' });
-    },
-
-    onSettingsMouseEnter: function() {
-        this.setState({ settingsHover: true });
-    },
-
-    onSettingsMouseLeave: function() {
-        this.setState({ settingsHover: false });
-    },
-
-    // Get the label/tooltip to show
-    getLabel: function(label, show) {
-        if (show) {
-            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
-        }
-    },
-
-    render: function() {
-        var TintableSvg = sdk.getComponent('elements.TintableSvg');
-        return (
-            <div className="mx_BottomLeftMenu">
-                <div className="mx_BottomLeftMenu_options">
-                    <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
-                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
-                        { this.getLabel("Start chat", this.state.peopleHover) }
-                    </div>
-                    <div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
-                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
-                        { this.getLabel("Room directory", this.state.directoryHover) }
-                    </div>
-                    <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
-                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
-                        { this.getLabel("Create new room", this.state.roomsHover) }
-                    </div>
-                    <div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
-                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
-                        { this.getLabel("Settings", this.state.settingsHover) }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-});
--- a/src/components/structures/CompatibilityPage.js
+++ b/src/components/structures/CompatibilityPage.js
@@ -1,66 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'CompatibilityPage',
-    propTypes: {
-        onAccept: React.PropTypes.func
-    },
-
-    getDefaultProps: function() {
-        return {
-            onAccept: function() {} // NOP
-        };
-    },
-
-    onAccept: function() {
-        this.props.onAccept();
-    },
-
-    render: function() {
-
-        return (
-        <div className="mx_CompatibilityPage">
-            <div className="mx_CompatibilityPage_box">
-                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
-                <p>
-                Riot uses many advanced browser features, some of which are not
-                available or experimental in your current browser.
-                </p>
-                <p>
-                Please install <a href="https://www.google.com/chrome">Chrome</a> or
-                <a href="https://getfirefox.com">Firefox</a> for the best experience.
-                <a href="http://apple.com/safari">Safari</a> and
-                <a href="http://opera.com">Opera</a> work too.
-                </p>
-                <p>
-                With your current browser, the look and feel of the application may
-                be completely incorrect, and some or all features may not function.
-                If you want to try it anyway you can continue, but you are on your own
-                in terms of any issues you may encounter!
-                </p>
-                <button onClick={this.onAccept}>
-                    I understand the risks and wish to continue
-                </button>
-            </div>
-        </div>
-        );
-    }
-});
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -1,133 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var DragDropContext = require('react-dnd').DragDropContext;
-var HTML5Backend = require('react-dnd-html5-backend');
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-
-var VectorConferenceHandler = require('../../VectorConferenceHandler');
-var CallHandler = require("matrix-react-sdk/lib/CallHandler");
-
-var LeftPanel = React.createClass({
-    displayName: 'LeftPanel',
-
-    getInitialState: function() {
-        return {
-            showCallElement: null,
-            searchFilter: '',
-        };
-    },
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        this._recheckCallElement(newProps.selectedRoom);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        switch (payload.action) {
-            // listen for call state changes to prod the render method, which
-            // may hide the global CallView if the call it is tracking is dead
-            case 'call_state':
-                this._recheckCallElement(this.props.selectedRoom);
-                break;
-        }
-    },
-
-    _recheckCallElement: function(selectedRoomId) {
-        // if we aren't viewing a room with an ongoing call, but there is an
-        // active call, show the call element - we need to do this to make
-        // audio/video not crap out
-        var activeCall = CallHandler.getAnyActiveCall();
-        var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
-        var showCall = (activeCall && activeCall.call_state === 'connected' && !callForRoom);
-        this.setState({
-            showCallElement: showCall
-        });
-    },
-
-    onHideClick: function() {
-        dis.dispatch({
-            action: 'hide_left_panel',
-        });
-    },
-
-    onCallViewClick: function() {
-        var call = CallHandler.getAnyActiveCall();
-        if (call) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: call.groupRoomId || call.roomId,
-            });
-        }
-    },
-
-    onSearch: function(term) {
-        this.setState({ searchFilter: term });
-    },
-
-    render: function() {
-        var RoomList = sdk.getComponent('rooms.RoomList');
-        var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
-        var SearchBox = sdk.getComponent('structures.SearchBox');
-
-        var collapseButton;
-        var classes = "mx_LeftPanel mx_fadable";
-        if (this.props.collapsed) {
-            classes += " collapsed";
-        }
-        else {
-            // Hide the collapse button until we work out how to display it in the new skin
-            // collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
-        }
-
-        var callPreview;
-        if (this.state.showCallElement && !this.props.collapsed) {
-            var CallView = sdk.getComponent('voip.CallView');
-            callPreview = (
-                <CallView
-                    className="mx_LeftPanel_callView" showVoice={true} onClick={this.onCallViewClick}
-                    ConferenceHandler={VectorConferenceHandler} />
-            );
-        }
-
-        return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
-                <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
-                { collapseButton }
-                { callPreview }
-                <RoomList
-                    selectedRoom={this.props.selectedRoom}
-                    collapsed={this.props.collapsed}
-                    searchFilter={this.state.searchFilter}
-                    ConferenceHandler={VectorConferenceHandler} />
-                <BottomLeftMenu collapsed={this.props.collapsed}/>
-            </aside>
-        );
-    }
-});
-
-module.exports = DragDropContext(HTML5Backend)(LeftPanel);
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -1,279 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var sdk = require('matrix-react-sdk');
-var Matrix = require("matrix-js-sdk");
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
-var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
-var Modal = require('matrix-react-sdk/lib/Modal');
-
-module.exports = React.createClass({
-    displayName: 'RightPanel',
-
-    propTypes: {
-        userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
-        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
-        collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
-    },
-
-    Phase : {
-        MemberList: 'MemberList',
-        FilePanel: 'FilePanel',
-        NotificationPanel: 'NotificationPanel',
-        MemberInfo: 'MemberInfo',
-    },
-
-    componentWillMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        var cli = MatrixClientPeg.get();
-        cli.on("RoomState.members", this.onRoomStateMember);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
-        }
-    },
-
-    getInitialState: function() {
-        if (this.props.userId) {
-            var member = new Matrix.RoomMember(null, this.props.userId);
-            return {
-                phase: this.Phase.MemberInfo,
-                member: member,
-            }
-        }
-        else {
-            return {
-                phase: this.Phase.MemberList
-            }
-        }
-    },
-
-    onMemberListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
-            this.setState({ phase: this.Phase.MemberList });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
-    },
-
-    onFileListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
-            this.setState({ phase: this.Phase.FilePanel });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
-    },
-
-    onNotificationListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
-            this.setState({ phase: this.Phase.NotificationPanel });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
-    },
-
-    onInviteButtonClick: function() {
-        if (MatrixClientPeg.get().isGuest()) {
-            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: "Please Register",
-                description: "Guest users can't invite users. Please register to invite."
-            });
-            return;
-        }
-
-        // call ChatInviteDialog
-        dis.dispatch({
-            action: 'view_invite',
-            roomId: this.props.roomId,
-        });
-    },
-
-    onRoomStateMember: function(ev, state, member) {
-        // redraw the badge on the membership list
-        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
-            this._delayedUpdate();
-        }
-        else if (this.state.phase === this.Phase.MemberInfo && member.roomId === this.props.roomId &&
-                member.userId === this.state.member.userId) {
-            // refresh the member info (e.g. new power level)
-            this._delayedUpdate();
-        }
-    },
-
-    _delayedUpdate: new rate_limited_func(function() {
-        this.forceUpdate();
-    }, 500),
-
-    onAction: function(payload) {
-        if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-            if (payload.member) {
-                this.setState({
-                    phase: this.Phase.MemberInfo,
-                    member: payload.member,
-                });
-            }
-            else {
-                this.setState({
-                    phase: this.Phase.MemberList
-                });
-            }
-        }
-        else if (payload.action === "view_room") {
-            if (this.state.phase === this.Phase.MemberInfo) {
-                this.setState({
-                    phase: this.Phase.MemberList
-                });
-            }
-        }
-    },
-
-    render: function() {
-        var MemberList = sdk.getComponent('rooms.MemberList');
-        var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
-        var FilePanel = sdk.getComponent('structures.FilePanel');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var buttonGroup;
-        var inviteGroup;
-        var panel;
-
-        var filesHighlight;
-        var membersHighlight;
-        var notificationsHighlight;
-        if (!this.props.collapsed) {
-            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
-                membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
-            }
-            else if (this.state.phase == this.Phase.FilePanel) {
-                filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
-            }
-            else if (this.state.phase == this.Phase.NotificationPanel) {
-                notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
-            }
-        }
-
-        var membersBadge;
-        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
-            var cli = MatrixClientPeg.get();
-            var room = cli.getRoom(this.props.roomId);
-            var user_is_in_room;
-            if (room) {
-                membersBadge = room.getJoinedMembers().length;
-                user_is_in_room = room.hasMembershipState(
-                    MatrixClientPeg.get().credentials.userId, 'join'
-                );
-            }
-
-            if (user_is_in_room) {
-                inviteGroup =
-                    <div className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
-                        <div className="mx_RightPanel_icon" >
-                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
-                        </div>
-                        <div className="mx_RightPanel_message">Invite to this room</div>
-                    </div>;
-            }
-
-        }
-
-        if (this.props.roomId) {
-            buttonGroup =
-                    <div className="mx_RightPanel_headerButtonGroup">
-                        <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
-                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
-                            { membersHighlight }
-                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
-                            { filesHighlight }
-                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
-                            { notificationsHighlight }
-                        </div>
-                    </div>;
-        }
-
-        if (!this.props.collapsed) {
-            if(this.props.roomId && this.state.phase == this.Phase.MemberList) {
-                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
-            }
-            else if(this.state.phase == this.Phase.MemberInfo) {
-                var MemberInfo = sdk.getComponent('rooms.MemberInfo');
-                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
-            }
-            else if (this.state.phase == this.Phase.NotificationPanel) {
-                panel = <NotificationPanel />
-            }
-            else if (this.state.phase == this.Phase.FilePanel) {
-                panel = <FilePanel roomId={this.props.roomId} />
-            }
-        }
-
-        if (!panel) {
-            panel = <div className="mx_RightPanel_blank"></div>;
-        }
-
-        var classes = "mx_RightPanel mx_fadable";
-        if (this.props.collapsed) {
-            classes += " collapsed";
-        }
-
-        return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
-                <div className="mx_RightPanel_header">
-                    { buttonGroup }
-                </div>
-                { panel }
-                <div className="mx_RightPanel_footer">
-                    { inviteGroup }
-                </div>
-            </aside>
-        );
-    }
-});
-
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -1,631 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var ContentRepo = require("matrix-js-sdk").ContentRepo;
-var Modal = require('matrix-react-sdk/lib/Modal');
-var sdk = require('matrix-react-sdk');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var GeminiScrollbar = require('react-gemini-scrollbar');
-
-var linkify = require('linkifyjs');
-var linkifyString = require('linkifyjs/string');
-var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
-var sanitizeHtml = require('sanitize-html');
-var q = require('q');
-
-linkifyMatrix(linkify);
-
-module.exports = React.createClass({
-    displayName: 'RoomDirectory',
-
-    propTypes: {
-        config: React.PropTypes.object,
-    },
-
-    getDefaultProps: function() {
-        return {
-            config: {
-                networks: [],
-            },
-        }
-    },
-
-    getInitialState: function() {
-        return {
-            publicRooms: [],
-            loading: true,
-            network: null,
-            roomServer: null,
-            filterString: null,
-        }
-    },
-
-    componentWillMount: function() {
-        // precompile Regexps
-        this.portalRoomPatterns = {};
-        this.nativePatterns = {};
-        if (this.props.config.networks) {
-            for (const network of Object.keys(this.props.config.networks)) {
-                const network_info = this.props.config.networks[network];
-                if (network_info.portalRoomPattern) {
-                    this.portalRoomPatterns[network] = new RegExp(network_info.portalRoomPattern);
-                }
-                if (network_info.nativePattern) {
-                    this.nativePatterns[network] = new RegExp(network_info.nativePattern);
-                }
-            }
-        }
-
-        this.nextBatch = null;
-        this.filterTimeout = null;
-        this.scrollPanel = null;
-        this.protocols = null;
-
-        MatrixClientPeg.get().getThirdpartyProtocols().done((response) => {
-            this.protocols = response;
-        }, (err) => {
-            if (MatrixClientPeg.get().isGuest()) {
-                // Guests currently aren't allowed to use this API, so
-                // ignore this as otherwise this error is literally the
-                // thing you see when loading the client!
-                return;
-            }
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Failed to get protocol list from Home Server",
-                description: "The Home Server may be too old to support third party networks",
-            });
-        });
-
-        // dis.dispatch({
-        //     action: 'ui_opacity',
-        //     sideOpacity: 0.3,
-        //     middleOpacity: 0.3,
-        // });
-    },
-
-    componentWillUnmount: function() {
-        // dis.dispatch({
-        //     action: 'ui_opacity',
-        //     sideOpacity: 1.0,
-        //     middleOpacity: 1.0,
-        // });
-    },
-
-    refreshRoomList: function() {
-        this.nextBatch = null;
-        this.setState({
-            publicRooms: [],
-            loading: true,
-        });
-        this.getMoreRooms().done();
-    },
-
-    getMoreRooms: function() {
-        if (!MatrixClientPeg.get()) return q();
-
-        const my_filter_string = this.state.filterString;
-        const my_server = this.state.roomServer;
-        // remember the next batch token when we sent the request
-        // too. If it's changed, appending to the list will corrupt it.
-        const my_next_batch = this.nextBatch;
-        const opts = {limit: 20};
-        if (my_server != MatrixClientPeg.getHomeServerName()) {
-            opts.server = my_server;
-        }
-        if (this.nextBatch) opts.since = this.nextBatch;
-        if (my_filter_string) opts.filter = { generic_search_term: my_filter_string } ;
-        return MatrixClientPeg.get().publicRooms(opts).then((data) => {
-            if (
-                my_filter_string != this.state.filterString ||
-                my_server != this.state.roomServer ||
-                my_next_batch != this.nextBatch)
-            {
-                // if the filter or server has changed since this request was sent,
-                // throw away the result (don't even clear the busy flag
-                // since we must still have a request in flight)
-                return;
-            }
-
-            this.nextBatch = data.next_batch;
-            this.setState((s) => {
-                s.publicRooms.push(...data.chunk);
-                s.loading = false;
-                return s;
-            });
-            return Boolean(data.next_batch);
-        }, (err) => {
-            if (
-                my_filter_string != this.state.filterString ||
-                my_server != this.state.roomServer ||
-                my_next_batch != this.nextBatch)
-            {
-                // as above: we don't care about errors for old
-                // requests either
-                return;
-            }
-            this.setState({ loading: false });
-            console.error("Failed to get publicRooms: %s", JSON.stringify(err));
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Failed to get public room list",
-                description: err.message
-            });
-        });
-    },
-
-    /**
-     * A limited interface for removing rooms from the directory.
-     * Will set the room to not be publicly visible and delete the
-     * default alias. In the long term, it would be better to allow
-     * HS admins to do this through the RoomSettings interface, but
-     * this needs SPEC-417.
-     */
-    removeFromDirectory: function(room) {
-        var alias = get_display_alias_for_room(room);
-        var name = room.name || alias || "Unnamed room";
-
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-
-        var desc;
-        if (alias) {
-            desc = `Delete the room alias '${alias}' and remove '${name}' from the directory?`;
-        } else {
-            desc = `Remove '${name}' from the directory?`;
-        }
-
-        Modal.createDialog(QuestionDialog, {
-            title: "Remove from Directory",
-            description: desc,
-            onFinished: (should_delete) => {
-                if (!should_delete) return;
-
-                var Loader = sdk.getComponent("elements.Spinner");
-                var modal = Modal.createDialog(Loader);
-                var step = `remove '${name}' from the directory.`;
-
-                MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
-                    if (!alias) return;
-                    step = 'delete the alias.';
-                    return MatrixClientPeg.get().deleteAlias(alias);
-                }).done(() => {
-                    modal.close();
-                    this.refreshRoomList();
-                }, function(err) {
-                    modal.close();
-                    this.refreshRoomList();
-                    Modal.createDialog(ErrorDialog, {
-                        title: "Failed to "+step,
-                        description: err.toString()
-                    });
-                });
-            }
-        });
-    },
-
-    onRoomClicked: function(room, ev) {
-        if (ev.shiftKey) {
-            ev.preventDefault();
-            this.removeFromDirectory(room);
-        } else {
-            this.showRoom(room);
-        }
-    },
-
-    onOptionChange: function(server, network) {
-        // clear next batch so we don't try to load more rooms
-        this.nextBatch = null;
-        this.setState({
-            // Clear the public rooms out here otherwise we needlessly
-            // spend time filtering lots of rooms when we're about to
-            // to clear the list anyway.
-            publicRooms: [],
-            roomServer: server,
-            network: network,
-        }, this.refreshRoomList);
-        // We also refresh the room list each time even though this
-        // filtering is client-side. It hopefully won't be client side
-        // for very long, and we may have fetched a thousand rooms to
-        // find the five gitter ones, at which point we do not want
-        // to render all those rooms when switching back to 'all networks'.
-        // Easiest to just blow away the state & re-fetch.
-    },
-
-    onFillRequest: function(backwards) {
-        if (backwards || !this.nextBatch) return q(false);
-
-        return this.getMoreRooms();
-    },
-
-    onFilterChange: function(alias) {
-        this.setState({
-            filterString: alias || null,
-        });
-
-        // don't send the request for a little bit,
-        // no point hammering the server with a
-        // request for every keystroke, let the
-        // user finish typing.
-        if (this.filterTimeout) {
-            clearTimeout(this.filterTimeout);
-        }
-        this.filterTimeout = setTimeout(() => {
-            this.filterTimeout = null;
-            this.refreshRoomList();
-        }, 300);
-    },
-
-    onFilterClear: function() {
-        // update immediately
-        this.setState({
-            filterString: null,
-        }, this.refreshRoomList);
-
-        if (this.filterTimeout) {
-            clearTimeout(this.filterTimeout);
-        }
-    },
-
-    onJoinClick: function(alias) {
-        // If we're on the 'Matrix' network (or all networks),
-        // just show that rooms alias
-        if (this.state.network == null || this.state.network == '_matrix') {
-            this.showRoomAlias(alias);
-        } else {
-            // This is a 3rd party protocol. Let's see if we
-            // can join it
-            const fields = this._getFieldsForThirdPartyLocation(alias, this.state.network);
-            if (!fields) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Unable to join network",
-                    description: "Riot does not know how to join a room on this network",
-                });
-                return;
-            }
-            const protocol = this._protocolForThirdPartyNetwork(this.state.network);
-            MatrixClientPeg.get().getThirdpartyLocation(protocol, fields).done((resp) => {
-                if (resp.length > 0 && resp[0].alias) {
-                    this.showRoomAlias(resp[0].alias);
-                } else {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
-                        title: "Room not found",
-                        description: "Couldn't find a matching Matrix room",
-                    });
-                }
-            }, (e) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Fetching third party location failed",
-                    description: "Unable to look up room ID from server",
-                });
-            });
-        }
-    },
-
-    showRoomAlias: function(alias) {
-        this.showRoom(null, alias);
-    },
-
-    showRoom: function(room, room_alias) {
-        var payload = {action: 'view_room'};
-        if (room) {
-            // Don't let the user view a room they won't be able to either
-            // peek or join: fail earlier so they don't have to click back
-            // to the directory.
-            if (MatrixClientPeg.get().isGuest()) {
-                if (!room.world_readable && !room.guest_can_join) {
-                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-                    Modal.createDialog(NeedToRegisterDialog, {
-                        title: "Failed to join the room",
-                        description: "This room is inaccessible to guests. You may be able to join if you register."
-                    });
-                    return;
-                }
-            }
-
-            if (!room_alias) {
-                room_alias = get_display_alias_for_room(room);
-            }
-
-            payload.oob_data = {
-                avatarUrl: room.avatar_url,
-                // XXX: This logic is duplicated from the JS SDK which
-                // would normally decide what the name is.
-                name: room.name || room_alias || "Unnamed room",
-            };
-        }
-        // It's not really possible to join Matrix rooms by ID because the HS has no way to know
-        // which servers to start querying. However, there's no other way to join rooms in
-        // this list without aliases at present, so if roomAlias isn't set here we have no
-        // choice but to supply the ID.
-        if (room_alias) {
-            payload.room_alias = room_alias;
-        } else {
-            payload.room_id = room.room_id;
-        }
-        dis.dispatch(payload);
-    },
-
-    getRows: function() {
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-
-        if (!this.state.publicRooms) return [];
-
-        var rooms = this.state.publicRooms.filter((a) => {
-            if (this.state.network) {
-                if (!this._isRoomInNetwork(a, this.state.roomServer, this.state.network)) return false;
-            }
-
-            return true;
-        });
-        var rows = [];
-        var self = this;
-        var guestRead, guestJoin, perms;
-        for (var i = 0; i < rooms.length; i++) {
-            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
-            guestRead = null;
-            guestJoin = null;
-
-            if (rooms[i].world_readable) {
-                guestRead = (
-                    <div className="mx_RoomDirectory_perm">World readable</div>
-                );
-            }
-            if (rooms[i].guest_can_join) {
-                guestJoin = (
-                    <div className="mx_RoomDirectory_perm">Guests can join</div>
-                );
-            }
-
-            perms = null;
-            if (guestRead || guestJoin) {
-                perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
-            }
-
-            var topic = rooms[i].topic || '';
-            topic = linkifyString(sanitizeHtml(topic));
-
-            rows.push(
-                <tr key={ rooms[i].room_id }
-                    onClick={self.onRoomClicked.bind(self, rooms[i])}
-                    // cancel onMouseDown otherwise shift-clicking highlights text
-                    onMouseDown={(ev) => {ev.preventDefault();}}
-                >
-                    <td className="mx_RoomDirectory_roomAvatar">
-                        <BaseAvatar width={24} height={24} resizeMethod='crop'
-                            name={ name } idName={ name }
-                            url={ ContentRepo.getHttpUriForMxc(
-                                    MatrixClientPeg.get().getHomeserverUrl(),
-                                    rooms[i].avatar_url, 24, 24, "crop") } />
-                    </td>
-                    <td className="mx_RoomDirectory_roomDescription">
-                        <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
-                        { perms }
-                        <div className="mx_RoomDirectory_topic"
-                             onClick={ function(e) { e.stopPropagation() } }
-                             dangerouslySetInnerHTML={{ __html: topic }}/>
-                        <div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(rooms[i]) }</div>
-                    </td>
-                    <td className="mx_RoomDirectory_roomMemberCount">
-                        { rooms[i].num_joined_members }
-                    </td>
-                </tr>
-            );
-        }
-        return rows;
-    },
-
-    collectScrollPanel: function(element) {
-        this.scrollPanel = element;
-    },
-
-    /**
-     * Terrible temporary function that guess what network a public room
-     * entry is in, until synapse is able to tell us
-     */
-    _isRoomInNetwork: function(room, server, network) {
-        // We carve rooms into two categories here. 'portal' rooms are
-        // rooms created by a user joining a bridge 'portal' alias to
-        // participate in that room or a foreign network. A room is a
-        // portal room if it has exactly one alias and that alias matches
-        // a pattern defined in the config. Its network is the key
-        // of the pattern that it matches.
-        // All other rooms are considered 'native matrix' rooms, and
-        // go into the special '_matrix' network.
-
-        let roomNetwork = '_matrix';
-        if (room.aliases && room.aliases.length == 1) {
-            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
-                for (const n of this.props.config.serverConfig[server].networks) {
-                    const pat = this.portalRoomPatterns[n];
-                    if (pat && pat.test(room.aliases[0])) {
-                        roomNetwork = n;
-                    }
-                }
-            }
-        }
-        return roomNetwork == network;
-    },
-
-    _stringLooksLikeId: function(s, network) {
-        let pat = /^#[^\s]+:[^\s]/;
-        if (
-            network && network != '_matrix' &&
-            this.nativePatterns[network]
-        ) {
-            pat = this.nativePatterns[network];
-        }
-
-        return pat.test(s);
-    },
-
-    _protocolForThirdPartyNetwork: function(network) {
-        if (
-            this.props.config.networks &&
-            this.props.config.networks[network] &&
-            this.props.config.networks[network].protocol
-        ) {
-            return this.props.config.networks[network].protocol;
-        }
-    },
-
-    _getFieldsForThirdPartyLocation: function(user_input, network) {
-        if (!this.props.config.networks || !this.props.config.networks[network]) return null;
-
-        const network_info = this.props.config.networks[network];
-        if (!network_info.protocol) return null;
-
-        if (!this.protocols) return null;
-
-        let matched_instance;
-        // Try to find which instance in the 'protocols' response
-        // matches this network. We look for a matching protocol
-        // and the existence of a 'domain' field and if present,
-        // its value.
-        if (
-            this.protocols[network_info.protocol] &&
-            this.protocols[network_info.protocol].instances &&
-            this.protocols[network_info.protocol].instances.length == 1
-        ) {
-            const the_instance = this.protocols[network_info.protocol].instances[0];
-            // If there's only one instance in this protocol, use it
-            // as long as it has no domain (which we assume to mean it's
-            // there is only one possible instance).
-            if (
-                (
-                    the_instance.fields.domain === undefined &&
-                    network_info.domain === undefined
-                ) ||
-                (
-                    the_instance.fields.domain !== undefined &&
-                    the_instance.fields.domain == network_info.domain
-                )
-            ) {
-                matched_instance = the_instance;
-            }
-        } else if (network_info.domain) {
-            // otherwise, we look for one with a matching domain.
-            for (const this_instance of this.protocols[network_info.protocol].instances) {
-                if (this_instance.fields.domain == network_info.domain) {
-                    matched_instance = this_instance;
-                }
-            }
-        }
-
-        if (matched_instance === undefined) return null;
-
-        // now make an object with the fields specified by that protocol. We
-        // require that the values of all but the last field come from the
-        // instance. The last is the user input.
-        const required_fields = this.protocols[network_info.protocol].location_fields;
-        const fields = {};
-        for (let i = 0; i < required_fields.length - 1; ++i) {
-            const this_field = required_fields[i];
-            if (matched_instance.fields[this_field] === undefined) return null;
-            fields[this_field] = matched_instance.fields[this_field];
-        }
-        fields[required_fields[required_fields.length - 1]] = user_input;
-        return fields;
-    },
-
-    render: function() {
-        let content;
-        if (this.state.loading) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            content = <div className="mx_RoomDirectory">
-                <Loader />
-            </div>;
-        } else {
-            const rows = this.getRows();
-            // we still show the scrollpanel, at least for now, because
-            // otherwise we don't fetch more because we don't get a fill
-            // request from the scrollpanel because there isn't one
-            let scrollpanel_content;
-            if (rows.length == 0) {
-                scrollpanel_content = <i>No rooms to show</i>;
-            } else {
-                scrollpanel_content = <table ref="directory_table" className="mx_RoomDirectory_table">
-                    <tbody>
-                        { this.getRows() }
-                    </tbody>
-                </table>;
-            }
-            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-            content = <ScrollPanel ref={this.collectScrollPanel}
-                className="mx_RoomDirectory_tableWrapper"
-                onFillRequest={ this.onFillRequest }
-                stickyBottom={false}
-                startAtBottom={false}
-                onResize={function(){}}
-            >
-                { scrollpanel_content }
-            </ScrollPanel>;
-        }
-
-        let placeholder = 'Search for a room';
-        if (this.state.network === null || this.state.network === '_matrix') {
-            placeholder = '#example:' + this.state.roomServer;
-        } else if (
-            this.props.config.networks &&
-            this.props.config.networks[this.state.network] &&
-            this.props.config.networks[this.state.network].example &&
-            this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network)
-        ) {
-            placeholder = this.props.config.networks[this.state.network].example;
-        }
-
-        let showJoinButton = this._stringLooksLikeId(this.state.filterString, this.state.network);
-        if (this.state.network && this.state.network != '_matrix') {
-            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network) === null) {
-                showJoinButton = false;
-            }
-        }
-
-        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
-        const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
-        const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
-        return (
-            <div className="mx_RoomDirectory">
-                <SimpleRoomHeader title="Directory" />
-                <div className="mx_RoomDirectory_list">
-                    <div className="mx_RoomDirectory_listheader">
-                        <DirectorySearchBox
-                            className="mx_RoomDirectory_searchbox"
-                            onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
-                            placeholder={placeholder} showJoinButton={showJoinButton}
-                        />
-                        <NetworkDropdown config={this.props.config} onOptionChange={this.onOptionChange} />
-                    </div>
-                    {content}
-                </div>
-            </div>
-        );
-    }
-});
-
-// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
-// but works with the objects we get from the public room list
-function get_display_alias_for_room(room) {
-    return  room.canonical_alias || (room.aliases ? room.aliases[0] : "");
-}
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -1,563 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var classNames = require('classnames');
-var DropTarget = require('react-dnd').DropTarget;
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var Unread = require('matrix-react-sdk/lib/Unread');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
-var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
-
-// turn this on for drop & drag console debugging galore
-var debug = false;
-
-const TRUNCATE_AT = 10;
-
-var roomListTarget = {
-    canDrop: function() {
-        return true;
-    },
-
-    drop: function(props, monitor, component) {
-        if (debug) console.log("dropped on sublist")
-    },
-
-    hover: function(props, monitor, component) {
-        var item = monitor.getItem();
-
-        if (component.state.sortedList.length == 0 && props.editable) {
-            if (debug) console.log("hovering on sublist " + props.label + ", isOver=" + monitor.isOver());
-
-            if (item.targetList !== component) {
-                 item.targetList.removeRoomTile(item.room);
-                 item.targetList = component;
-            }
-
-            component.moveRoomTile(item.room, 0);
-        }
-    },
-};
-
-var 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,
-
-        order: React.PropTypes.string.isRequired,
-
-        // undefined if no room is selected (eg we are showing settings)
-        selectedRoom: React.PropTypes.string,
-
-        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,
-    },
-
-    getInitialState: function() {
-        return {
-            hidden: this.props.startAsHidden || false,
-            truncateAt: TRUNCATE_AT,
-            sortedList: [],
-        };
-    },
-
-    getDefaultProps: function() {
-        return {
-            onHeaderClick: function() {}, // NOP
-            onShowMoreRooms: function() {} // NOP
-        };
-    },
-
-    componentWillMount: function() {
-        this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        // order the room list appropriately before we re-render
-        //if (debug) console.log("received new props, list = " + newProps.list);
-        this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order);
-    },
-
-    applySearchFilter: function(list, filter) {
-        if (filter === "") return list;
-        return list.filter((room) => {
-            return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0
-        });
-    },
-
-    // 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;
-        if (this.state.hidden || stuck === undefined || stuck === "none") {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
-    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 });
-
-            if (isHidden) {
-                // as good a way as any to reset the truncate state
-                this.setState({ truncateAt : TRUNCATE_AT });
-            }
-
-            this.props.onShowMoreRooms();
-            this.props.onHeaderClick(isHidden);
-        } else {
-            // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
-        }
-    },
-
-    tsOfNewestEvent: function(room) {
-        for (var i = room.timeline.length - 1; i >= 0; --i) {
-            var ev = room.timeline[i];
-            if (Unread.eventTriggersUnreadCount(ev) ||
-                (ev.sender && ev.sender.userId === MatrixClientPeg.get().credentials.userId))
-            {
-                return ev.getTs();
-            }
-        }
-
-        // we might only have events that don't trigger the unread indicator,
-        // in which case use the oldest event even if normally it wouldn't count.
-        // This is better than just assuming the last event was forever ago.
-        if (room.timeline.length) {
-            return room.timeline[0].getTs();
-        } else {
-            return Number.MAX_SAFE_INTEGER;
-        }
-    },
-
-    // TODO: factor the comparators back out into a generic comparator
-    // so that view_prev_room and view_next_room can do the right thing
-
-    recentsComparator: function(roomA, roomB) {
-        return this.tsOfNewestEvent(roomB) - this.tsOfNewestEvent(roomA);
-    },
-
-    lexicographicalComparator: function(roomA, roomB) {
-        return roomA.name > roomB.name ? 1 : -1;
-    },
-
-    // Generates the manual comparator using the given list
-    manualComparator: function(roomA, roomB) {
-        if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0;
-
-        // Make sure the room tag has an order element, if not set it to be the bottom
-        var a = roomA.tags[this.props.tagName].order;
-        var b = roomB.tags[this.props.tagName].order;
-
-        // Order undefined room tag orders to the bottom
-        if (a === undefined && b !== undefined) {
-            return 1;
-        } else if (a !== undefined && b === undefined) {
-            return -1;
-        }
-
-        return a == b ? this.lexicographicalComparator(roomA, roomB) : ( a > b  ? 1 : -1);
-    },
-
-    sortList: function(list, order) {
-        if (list === undefined) list = this.state.sortedList;
-        if (order === undefined) order = this.props.order;
-        var comparator;
-        list = list || [];
-        if (order === "manual") comparator = this.manualComparator;
-        if (order === "recent") comparator = this.recentsComparator;
-
-        // Fix undefined orders here, and make sure the backend gets updated as well
-        this._fixUndefinedOrder(list);
-
-        //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list);
-        this.setState({ sortedList: list.sort(comparator) });
-    },
-
-    _shouldShowNotifBadge: function(roomNotifState) {
-        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
-        return showBadgeInStates.indexOf(roomNotifState) > -1;
-    },
-
-    _shouldShowMentionBadge: function(roomNotifState) {
-        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
-     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
-     */
-    roomNotificationCount: function(truncateAt) {
-        var self = this;
-
-        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 || self.props.label === 'Invites';
-                var notificationCount = room.getUnreadNotificationCount();
-
-                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
-                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
-                const badges = notifBadges || mentionBadges;
-
-                if (badges) {
-                    result[0] += notificationCount;
-                    if (highlight) {
-                        result[1] = true;
-                    }
-                }
-            }
-            return result;
-        }, [0, false]);
-    },
-
-    _updateSubListCount: function() {
-        // Force an update by setting the state to the current state
-        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
-        // method is honoured
-        this.setState(this.state);
-    },
-
-    moveRoomTile: function(room, atIndex) {
-        if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
-        //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
-        var found = this.findRoomTile(room);
-        var rooms = this.state.sortedList;
-        if (found.room) {
-            if (debug) console.log("removing at index " + found.index + " and adding at index " + atIndex);
-            rooms.splice(found.index, 1);
-            rooms.splice(atIndex, 0, found.room);
-        }
-        else {
-            if (debug) console.log("Adding at index " + atIndex);
-            rooms.splice(atIndex, 0, room);
-        }
-        this.setState({ sortedList: rooms });
-        // console.log("moveRoomTile after: " + JSON.stringify(this.state.rooms));
-    },
-
-    // XXX: this isn't invoked via a property method but indirectly via
-    // the roomList property method.  Unsure how evil this is.
-    removeRoomTile: function(room) {
-        if (debug) console.log("remove room " + room.roomId);
-        var found = this.findRoomTile(room);
-        var rooms = this.state.sortedList;
-        if (found.room) {
-            rooms.splice(found.index, 1);
-        }
-        else {
-            console.warn("Can't remove room " + room.roomId + " - can't find it");
-        }
-        this.setState({ sortedList: rooms });
-    },
-
-    findRoomTile: function(room) {
-        var index = this.state.sortedList.indexOf(room);
-        if (index >= 0) {
-            // console.log("found: room: " + room.roomId + " with index " + index);
-        }
-        else {
-            if (debug) console.log("didn't find room");
-            room = null;
-        }
-        return ({
-            room: room,
-            index: index,
-        });
-    },
-
-    calcManualOrderTagData: function(room) {
-        var index = this.state.sortedList.indexOf(room);
-
-        // we sort rooms by the lexicographic ordering of the 'order' metadata on their tags.
-        // for convenience, we calculate this for now a floating point number between 0.0 and 1.0.
-
-        var orderA = 0.0; // by default we're next to the beginning of the list
-        if (index > 0) {
-            var prevTag = this.state.sortedList[index - 1].tags[this.props.tagName];
-            if (!prevTag) {
-                console.error("Previous room in sublist is not tagged to be in this list. This should never happen.")
-            }
-            else if (prevTag.order === undefined) {
-                console.error("Previous room in sublist has no ordering metadata. This should never happen.");
-            }
-            else {
-                orderA = prevTag.order;
-            }
-        }
-
-        var orderB = 1.0; // by default we're next to the end of the list too
-        if (index < this.state.sortedList.length - 1) {
-            var nextTag = this.state.sortedList[index + 1].tags[this.props.tagName];
-            if (!nextTag) {
-                console.error("Next room in sublist is not tagged to be in this list. This should never happen.")
-            }
-            else if (nextTag.order === undefined) {
-                console.error("Next room in sublist has no ordering metadata. This should never happen.");
-            }
-            else {
-                orderB = nextTag.order;
-            }
-        }
-
-        var order = (orderA + orderB) / 2.0;
-        if (order === orderA || order === orderB) {
-            console.error("Cannot describe new list position.  This should be incredibly unlikely.");
-            // TODO: renumber the list
-        }
-
-        return order;
-    },
-
-    makeRoomTiles: function() {
-        var self = this;
-        var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
-        return this.state.sortedList.map(function(room) {
-            var selected = room.roomId == self.props.selectedRoom;
-            // XXX: is it evil to pass in self as a prop to RoomTile?
-            return (
-                <DNDRoomTile
-                    room={ room }
-                    roomSubList={ self }
-                    key={ room.roomId }
-                    collapsed={ self.props.collapsed || false}
-                    selected={ selected }
-                    unread={ Unread.doesRoomHaveUnreadMessages(room) }
-                    highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
-                    isInvite={ self.props.label === 'Invites' }
-                    refreshSubList={ self._updateSubListCount }
-                    incomingCall={ null } />
-            );
-        });
-    },
-
-    _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        var subListNotifications = this.roomNotificationCount();
-        var subListNotifCount = subListNotifications[0];
-        var subListNotifHighlight = subListNotifications[1];
-
-        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
-
-        var chevronClasses = classNames({
-            'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronRight': this.state.hidden,
-            'mx_RoomSubList_chevronDown': !this.state.hidden,
-        });
-
-        var badgeClasses = classNames({
-            'mx_RoomSubList_badge': true,
-            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-        });
-
-        var badge;
-        if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
-        }
-
-        // When collapsed, allow a long hover on the header to show user
-        // the full tag name and room count
-        var title;
-        if (this.props.collapsed) {
-            title = this.props.label;
-            if (roomCount !== '') {
-                title += " [" + roomCount + "]";
-            }
-        }
-
-        var incomingCall;
-        if (this.props.incomingCall) {
-            var self = this;
-            // Check if the incoming call is for this section
-            var incomingCallRoom = this.state.sortedList.filter(function(room) {
-                return self.props.incomingCall.roomId === room.roomId;
-            });
-
-            if (incomingCallRoom.length === 1) {
-                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-                incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
-            }
-        }
-
-        return (
-            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
-                <div onClick={ this.onClick } className="mx_RoomSubList_label">
-                    { this.props.collapsed ? '' : this.props.label }
-                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
-                    <div className={chevronClasses}></div>
-                    { badge }
-                    { incomingCall }
-                </div>
-            </div>
-        );
-    },
-
-    _createOverflowTile: function(overflowCount, totalCount) {
-        var content = <div className="mx_RoomSubList_chevronDown"></div>;
-
-        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
-        var overflowNotifCount = overflowNotifications[0];
-        var overflowNotifHighlight = overflowNotifications[1];
-        if (overflowNotifCount && !this.props.collapsed) {
-            content = FormattingUtils.formatCount(overflowNotifCount);
-        }
-
-        var badgeClasses = classNames({
-            'mx_RoomSubList_moreBadge': true,
-            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
-            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
-        });
-
-        return (
-            <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomSubList_line"></div>
-                <div className="mx_RoomSubList_more">more</div>
-            <div className={ badgeClasses }>{ content }</div>
-            </div>
-        );
-    },
-
-    _showFullMemberList: function() {
-        this.setState({
-            truncateAt: -1
-        });
-
-        this.props.onShowMoreRooms();
-        this.props.onHeaderClick(false);
-    },
-
-    // Fix any undefined order elements of a room in a manual ordered list
-    //     room.tag[tagname].order
-    _fixUndefinedOrder: function(list) {
-        if (this.props.order === "manual") {
-            var order = 0.0;
-            var self = this;
-
-            // Find the highest (lowest position) order of a room in a manual ordered list
-            list.forEach(function(room) {
-                if (room.tags.hasOwnProperty(self.props.tagName)) {
-                    if (order < room.tags[self.props.tagName].order) {
-                        order = room.tags[self.props.tagName].order;
-                    }
-                }
-            });
-
-            // Fix any undefined order elements of a room in a manual ordered list
-            // Do this one at a time, as each time a rooms tag data is updated the RoomList
-            // gets triggered and another list is passed in. Doing it one at a time means that
-            // we always correctly calculate the highest order for the list - stops multiple
-            // rooms getting the same order. This is only really relevant for the first time this
-            // is run with historical room tag data, after that there should only be undefined
-            // in the list at a time anyway.
-            for (let i = 0; i < list.length; i++) {
-                if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) {
-                    MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() {
-                        // Do any final stuff here
-                    }).fail(function(err) {
-                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to add tag " + self.props.tagName + " to room",
-                            description: err.toString()
-                        });
-                    });
-                    break;
-                };
-            };
-        }
-    },
-
-    render: function() {
-        var connectDropTarget = this.props.connectDropTarget;
-        var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
-        var TruncatedList = sdk.getComponent('elements.TruncatedList');
-
-        var label = this.props.collapsed ? null : this.props.label;
-
-        //console.log("render: " + JSON.stringify(this.state.sortedList));
-
-        var target;
-        if (this.state.sortedList.length == 0 && this.props.editable) {
-            target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
-        }
-
-        if (this.state.sortedList.length > 0 || this.props.editable) {
-            var subList;
-            var classes = "mx_RoomSubList";
-
-            if (!this.state.hidden) {
-                subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
-                                         createOverflowElement={this._createOverflowTile} >
-                                { target }
-                                { this.makeRoomTiles() }
-                          </TruncatedList>;
-            }
-            else {
-                subList = <TruncatedList className={ classes }>
-                          </TruncatedList>;
-            }
-
-            return connectDropTarget(
-                <div>
-                    { this._getHeaderJsx() }
-                    { subList }
-                </div>
-            );
-        }
-        else {
-            var Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <div className="mx_RoomSubList">
-                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
-                    { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
-                </div>
-            );
-        }
-    }
-});
-
-// Export the wrapped version, inlining the 'collect' functions
-// to more closely resemble the ES7
-module.exports =
-DropTarget('RoomTile', roomListTarget, function(connect) {
-    return {
-        connectDropTarget: connect.dropTarget(),
-    }
-})(RoomSubList);
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -1,119 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
-
-module.exports = React.createClass({
-    displayName: 'SearchBox',
-
-    propTypes: {
-        collapsed: React.PropTypes.bool,
-        onSearch: React.PropTypes.func,
-    },
-
-    getInitialState: function() {
-        return {
-            searchTerm: "",
-        };
-    },
-
-    onChange: function() {
-        if (!this.refs.search) return;
-        this.setState({ searchTerm: this.refs.search.value });
-        this.onSearch();
-    },
-
-    onSearch: new rate_limited_func(
-        function() {
-            this.props.onSearch(this.refs.search.value);
-        },
-        100
-    ),
-
-    onToggleCollapse: function(show) {
-        if (show) {
-            dis.dispatch({
-                action: 'show_left_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_left_panel',
-            });
-        }
-    },
-
-    render: function() {
-        var TintableSvg = sdk.getComponent('elements.TintableSvg');
-
-        var toggleCollapse;
-        if (this.props.collapsed) {
-            toggleCollapse =
-                <div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
-                </div>
-        }
-        else {
-            toggleCollapse =
-                <div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
-                </div>
-        }
-
-        var searchControls;
-        if (!this.props.collapsed) {
-            searchControls = [
-                    this.state.searchTerm.length > 0 ?
-                    <div key="button"
-                         className="mx_SearchBox_closeButton"
-                         onClick={ ()=>{ this.refs.search.value = ""; this.onChange(); } }>
-                        <TintableSvg
-                            className="mx_SearchBox_searchButton"
-                            src="img/icons-close.svg" width="24" height="24"
-                        />
-                    </div>
-                    :
-                    <TintableSvg
-                        key="button"
-                        className="mx_SearchBox_searchButton"
-                        src="img/icons-search-copy.svg" width="13" height="13"
-                    />,
-                    <input
-                        key="searchfield"
-                        type="text"
-                        ref="search"
-                        className="mx_SearchBox_search"
-                        value={ this.state.searchTerm }
-                        onChange={ this.onChange }
-                        placeholder="Filter room names"
-                    />
-                ];
-        }
-
-        var self = this;
-        return (
-            <div className="mx_SearchBox">
-                { searchControls }
-                { toggleCollapse }
-            </div>
-        );
-    }
-});
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -1,54 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'ViewSource',
-
-    propTypes: {
-        onFinished: React.PropTypes.func.isRequired
-    },
-
-    componentDidMount: function() {
-        document.addEventListener("keydown", this.onKeyDown);
-    },
-
-    componentWillUnmount: function() {
-        document.removeEventListener("keydown", this.onKeyDown);
-    },
-
-    onKeyDown: function(ev) {
-        if (ev.keyCode == 27) { // escape
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    },
-
-    render: function() {
-        return (
-            <div className="mx_ViewSource">
-                <pre>
-                    {JSON.stringify(this.props.mxEvent.event, null, 2)}
-                </pre>
-            </div>
-        );
-    }
-});
-
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -1,171 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var sdk = require('matrix-react-sdk');
-var Modal = require('matrix-react-sdk/lib/Modal');
-var Resend = require("matrix-react-sdk/lib/Resend");
-import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
-
-module.exports = React.createClass({
-    displayName: 'MessageContextMenu',
-
-    propTypes: {
-        /* the MatrixEvent associated with the context menu */
-        mxEvent: React.PropTypes.object.isRequired,
-
-        /* an optional EventTileOps implementation that can be used to unhide preview widgets */
-        eventTileOps: React.PropTypes.object,
-
-        /* callback called when the menu is dismissed */
-        onFinished: React.PropTypes.func,
-    },
-
-    onResendClick: function() {
-        Resend.resend(this.props.mxEvent);
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onViewSourceClick: function() {
-        var ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createDialog(ViewSource, {
-            mxEvent: this.props.mxEvent
-        }, 'mx_Dialog_viewsource');
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onRedactClick: function() {
-        MatrixClientPeg.get().redactEvent(
-            this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-        ).done(function() {
-            // message should disappear by itself
-        }, function(e) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            // display error message stating you couldn't delete this.
-            var code = e.errcode || e.statusCode;
-            Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: "You cannot delete this message. (" + code + ")"
-            });
-        });
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onCancelSendClick: function() {
-        Resend.removeFromQueue(this.props.mxEvent);
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onPermalinkClick: function() {
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onUnhidePreviewClick: function() {
-        if (this.props.eventTileOps) {
-            this.props.eventTileOps.unhideWidget();
-        }
-        if (this.props.onFinished) this.props.onFinished();
-    },
-
-    onQuoteClick: function () {
-        console.log(this.props.mxEvent);
-        dis.dispatch({
-            action: 'quote',
-            event: this.props.mxEvent,
-        });
-    },
-
-    render: function() {
-        var eventStatus = this.props.mxEvent.status;
-        var resendButton;
-        var viewSourceButton;
-        var redactButton;
-        var cancelButton;
-        var permalinkButton;
-        var unhidePreviewButton;
-
-        if (eventStatus === 'not_sent') {
-            resendButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
-                    Resend
-                </div>
-            );
-        }
-
-        if (!eventStatus) { // sent
-            redactButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    Redact
-                </div>
-            );
-        }
-
-        if (eventStatus === "queued" || eventStatus === "not_sent") {
-            cancelButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
-                    Cancel Sending
-                </div>
-            );
-        }
-
-        viewSourceButton = (
-            <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                View Source
-            </div>
-        );
-
-        if (this.props.eventTileOps) {
-            if (this.props.eventTileOps.isWidgetHidden()) {
-                unhidePreviewButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        Unhide Preview
-                    </div>
-                )
-            }
-        }
-
-        // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
-        permalinkButton = (
-            <div className="mx_MessageContextMenu_field">
-                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
-                   target="_blank" onClick={ this.onPermalinkClick }>Permalink</a>
-            </div>
-        );
-
-        const quoteButton = (
-            <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-                Quote
-            </div>
-        );
-
-        return (
-            <div>
-                {resendButton}
-                {redactButton}
-                {cancelButton}
-                {viewSourceButton}
-                {unhidePreviewButton}
-                {permalinkButton}
-                {UserSettingsStore.isFeatureEnabled('rich_text_editor') ? quoteButton : null}
-            </div>
-        );
-    }
-});
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -1,144 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var q = require("q");
-var React = require('react');
-var classNames = require('classnames');
-var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-
-module.exports = React.createClass({
-    displayName: 'NotificationStateContextMenu',
-
-    propTypes: {
-        room: React.PropTypes.object.isRequired,
-        /* callback called when the menu is dismissed */
-        onFinished: React.PropTypes.func,
-    },
-
-    getInitialState() {
-        return {
-            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
-        }
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    _save: function(newState) {
-        const oldState = this.state.roomNotifState;
-        const roomId = this.props.room.roomId;
-        var cli = MatrixClientPeg.get();
-
-        if (cli.isGuest()) return;
-
-        this.setState({
-            roomNotifState: newState,
-        });
-        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
-            // delay slightly so that the user can see their state change
-            // before closing the menu
-            return q.delay(500).then(() => {
-                if (this._unmounted) return;
-                // Close the context menu
-                if (this.props.onFinished) {
-                    this.props.onFinished();
-                };
-            });
-        }, (error) => {
-            // TODO: some form of error notification to the user
-            // to inform them that their state change failed.
-            // For now we at least set the state back
-            if (this._unmounted) return;
-            this.setState({
-                roomNotifState: oldState,
-            });
-        });
-    },
-
-    _onClickAlertMe: function() {
-        this._save(RoomNotifs.ALL_MESSAGES_LOUD);
-    },
-
-    _onClickAllNotifs: function() {
-        this._save(RoomNotifs.ALL_MESSAGES);
-    },
-
-    _onClickMentions: function() {
-        this._save(RoomNotifs.MENTIONS_ONLY);
-    },
-
-    _onClickMute: function() {
-        this._save(RoomNotifs.MUTE);
-    },
-
-    render: function() {
-        var alertMeClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
-        });
-
-        var allNotifsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
-        });
-
-        var mentionsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
-        });
-
-        var muteNotifsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
-        });
-
-        return (
-            <div>
-                <div className="mx_NotificationStateContextMenu_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
-                </div>
-                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
-                    All messages (loud)
-                </div>
-                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
-                    All messages
-                </div>
-                <div className={ mentionsClasses } onClick={this._onClickMentions} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
-                    Mentions only
-                </div>
-                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
-                    Mute
-                </div>
-            </div>
-        );
-    }
-});
--- a/src/components/views/context_menus/RoomTagContextMenu.js
+++ b/src/components/views/context_menus/RoomTagContextMenu.js
@@ -1,253 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var q = require("q");
-var React = require('react');
-var classNames = require('classnames');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var DMRoomMap = require('matrix-react-sdk/lib/utils/DMRoomMap');
-var Rooms = require('matrix-react-sdk/lib/Rooms');
-
-module.exports = React.createClass({
-    displayName: 'RoomTagContextMenu',
-
-    propTypes: {
-        room: React.PropTypes.object.isRequired,
-        /* callback called when the menu is dismissed */
-        onFinished: React.PropTypes.func,
-    },
-
-    getInitialState: function() {
-        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-        return {
-            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
-            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
-            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
-        };
-    },
-
-    _toggleTag: function(tagNameOn, tagNameOff) {
-        var self = this;
-        const roomId = this.props.room.roomId;
-        var cli = MatrixClientPeg.get();
-        if (!cli.isGuest()) {
-            q.delay(500).then(function() {
-                if (tagNameOff !== null && tagNameOff !== undefined) {
-                    cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
-                        // Close the context menu
-                        if (self.props.onFinished) {
-                            self.props.onFinished();
-                        };
-                    }).fail(function(err) {
-                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to remove tag " + tagNameOff + " from room",
-                            description: err.toString()
-                        });
-                    });
-                }
-
-                if (tagNameOn !== null && tagNameOn !== undefined) {
-                    // If the tag ordering meta data is required, it is added by
-                    // the RoomSubList when it sorts its rooms
-                    cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
-                        // Close the context menu
-                        if (self.props.onFinished) {
-                            self.props.onFinished();
-                        };
-                    }).fail(function(err) {
-                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to add tag " + tagNameOn + " to room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            });
-        }
-    },
-
-    _onClickFavourite: function() {
-        // Tag room as 'Favourite'
-        if (!this.state.isFavourite && this.state.isLowPriority) {
-            this.setState({
-                isFavourite: true,
-                isLowPriority: false,
-            });
-            this._toggleTag("m.favourite", "m.lowpriority");
-        } else if (this.state.isFavourite) {
-            this.setState({isFavourite: false});
-            this._toggleTag(null, "m.favourite");
-        } else if (!this.state.isFavourite) {
-            this.setState({isFavourite: true});
-            this._toggleTag("m.favourite");
-        }
-    },
-
-    _onClickLowPriority: function() {
-        // Tag room as 'Low Priority'
-        if (!this.state.isLowPriority && this.state.isFavourite) {
-            this.setState({
-                isFavourite: false,
-                isLowPriority: true,
-            });
-            this._toggleTag("m.lowpriority", "m.favourite");
-        } else if (this.state.isLowPriority) {
-            this.setState({isLowPriority: false});
-            this._toggleTag(null, "m.lowpriority");
-        } else if (!this.state.isLowPriority) {
-            this.setState({isLowPriority: true});
-            this._toggleTag("m.lowpriority");
-        }
-    },
-
-    _onClickDM: function() {
-        const newIsDirectMessage = !this.state.isDirectMessage;
-        this.setState({
-            isDirectMessage: newIsDirectMessage,
-        });
-
-        if (MatrixClientPeg.get().isGuest()) return;
-
-        let newTarget;
-        if (newIsDirectMessage) {
-            const guessedTarget = Rooms.guessDMRoomTarget(
-                this.props.room,
-                this.props.room.getMember(MatrixClientPeg.get().credentials.userId),
-            );
-            newTarget = guessedTarget.userId;
-        } else {
-            newTarget = null;
-        }
-
-        // give some time for the user to see the icon change first, since
-        // this will hide the context menu once it completes
-        q.delay(500).done(() => {
-            return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => {
-                // Close the context menu
-                if (this.props.onFinished) {
-                    this.props.onFinished();
-                };
-            }, (err) => {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to set Direct Message status of room",
-                    description: err.toString()
-                });
-            });
-        });
-    },
-
-    _onClickLeave: function() {
-        // Leave room
-        dis.dispatch({
-            action: 'leave_room',
-            room_id: this.props.room.roomId,
-        });
-
-        // Close the context menu
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
-    },
-
-    _onClickForget: function() {
-        // FIXME: duplicated with RoomSettings (and dead code in RoomView)
-        MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
-            dis.dispatch({ action: 'view_next_room' });
-        }, function(err) {
-            var errCode = err.errcode || "unknown error code";
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: `Failed to forget room (${errCode})`
-            });
-        });
-
-        // Close the context menu
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
-    },
-
-    render: function() {
-        const myUserId = MatrixClientPeg.get().credentials.userId;
-        const myMember = this.props.room.getMember(myUserId);
-
-        const favouriteClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const lowPriorityClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const leaveClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': false,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const dmClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        if (myMember && myMember.membership === "leave") {
-            return (
-                <div>
-                    <div className={ leaveClasses } onClick={ this._onClickForget } >
-                        <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
-                        Forget
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div>
-                <div className={ favouriteClasses } onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_fave.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
-                    Favourite
-                </div>
-                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_low.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
-                    Low Priority
-                </div>
-                <div className={ dmClasses } onClick={this._onClickDM} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_person.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
-                    Direct Chat
-                </div>
-                <hr className="mx_RoomTagContextMenu_separator" />
-                <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
-                    Leave
-                </div>
-            </div>
-        );
-    }
-});
--- a/src/components/views/dialogs/ChangelogDialog.js
+++ b/src/components/views/dialogs/ChangelogDialog.js
@@ -1,92 +0,0 @@
-/*
- Copyright 2016 Aviral Dasgupta
-
- 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 sdk from 'matrix-react-sdk';
-import request from 'browser-request';
-
-const REPOS = ['vector-im/vector-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
-
-export default class ChangelogDialog extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {};
-    }
-
-    componentDidMount() {
-        const version = this.props.newVersion.split('-');
-        const version2 = this.props.version.split('-');
-        if(version == null || version2 == null) return;
-        for(let i=0; i<REPOS.length; i++) {
-            const oldVersion = version2[2*i+1];
-            const newVersion = version[2*i+1];
-            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
-                if(body == null) return;
-                this.setState({[REPOS[i]]: JSON.parse(body).commits});
-            });
-        }
-    }
-
-    _elementsForCommit(commit) {
-        return (
-            <li key={commit.sha} className="mx_ChangelogDialog_li">
-                <a href={commit.html_url} target="_blank" ref="noopener">
-                    {commit.commit.message}
-                </a>
-            </li>
-        );
-    }
-
-    render() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-
-        const logs = REPOS.map(repo => {
-            if (this.state[repo] == null) return <Spinner key={repo} />;
-            return (
-                <div key={repo}>
-                    <h2>{repo}</h2>
-                    <ul>
-                    {this.state[repo].map(this._elementsForCommit)}
-                    </ul>
-                </div>
-            )
-        });
-
-        const content = (
-            <div className="mx_ChangelogDialog_content">
-                {this.props.version == null || this.props.newVersion == null ? <h2>Unavailable</h2> : logs}
-            </div>
-        );
-
-
-        return (
-            <QuestionDialog
-                title="Changelog"
-                description={content}
-                button="Update"
-                onFinished={this.props.onFinished}
-                />
-        )
-    }
-}
-
-ChangelogDialog.propTypes = {
-    version: React.PropTypes.string.isRequired,
-    newVersion: React.PropTypes.string.isRequired,
-    onFinished: React.PropTypes.func.isRequired,
-};
--- a/src/components/views/directory/NetworkDropdown.js
+++ b/src/components/views/directory/NetworkDropdown.js
@@ -1,244 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-
-export default class NetworkDropdown extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.dropdownRootElement = null;
-        this.ignoreEvent = null;
-
-        this.onInputClick = this.onInputClick.bind(this);
-        this.onRootClick = this.onRootClick.bind(this);
-        this.onDocumentClick = this.onDocumentClick.bind(this);
-        this.onMenuOptionClick = this.onMenuOptionClick.bind(this);
-        this.onInputKeyUp = this.onInputKeyUp.bind(this);
-        this.collectRoot = this.collectRoot.bind(this);
-        this.collectInputTextBox = this.collectInputTextBox.bind(this);
-
-        this.inputTextBox = null;
-
-        const server = MatrixClientPeg.getHomeServerName();
-        let defaultNetwork = null;
-        if (
-            this.props.config.serverConfig &&
-            this.props.config.serverConfig[server] &&
-            this.props.config.serverConfig[server].networks &&
-            this.props.config.serverConfig[server].networks.indexOf('_matrix') > -1
-        ) {
-            defaultNetwork = '_matrix';
-        }
-
-        this.state = {
-            expanded: false,
-            selectedServer: server,
-            selectedNetwork: defaultNetwork,
-        };
-    }
-
-    componentWillMount() {
-        // Listen for all clicks on the document so we can close the
-        // menu when the user clicks somewhere else
-        document.addEventListener('click', this.onDocumentClick, false);
-
-        // fire this now so the defaults can be set up
-        this.props.onOptionChange(this.state.selectedServer, this.state.selectedNetwork);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('click', this.onDocumentClick, false);
-    }
-
-    componentDidUpdate() {
-        if (this.state.expanded && this.inputTextBox) {
-            this.inputTextBox.focus();
-        }
-    }
-
-    onDocumentClick(ev) {
-        // Close the dropdown if the user clicks anywhere that isn't
-        // within our root element
-        if (ev !== this.ignoreEvent) {
-            this.setState({
-                expanded: false,
-            });
-        }
-    }
-
-    onRootClick(ev) {
-        // This captures any clicks that happen within our elements,
-        // such that we can then ignore them when they're seen by the
-        // click listener on the document handler, ie. not close the
-        // dropdown immediately after opening it.
-        // NB. We can't just stopPropagation() because then the event
-        // doesn't reach the React onClick().
-        this.ignoreEvent = ev;
-    }
-
-    onInputClick(ev) {
-        this.setState({
-            expanded: !this.state.expanded,
-        });
-        ev.preventDefault();
-    }
-
-    onMenuOptionClick(server, network, ev) {
-        this.setState({
-            expanded: false,
-            selectedServer: server,
-            selectedNetwork: network,
-        });
-        this.props.onOptionChange(server, network);
-    }
-
-    onInputKeyUp(e) {
-        if (e.key == 'Enter') {
-            this.setState({
-                expanded: false,
-                selectedServer: e.target.value,
-                selectedNetwork: null,
-            });
-            this.props.onOptionChange(e.target.value, null);
-        }
-    }
-
-    collectRoot(e) {
-        if (this.dropdownRootElement) {
-            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
-        }
-        if (e) {
-            e.addEventListener('click', this.onRootClick, false);
-        }
-        this.dropdownRootElement = e;
-    }
-
-    collectInputTextBox(e) {
-        this.inputTextBox = e;
-    }
-
-    _getMenuOptions() {
-        const options = [];
-
-        let servers = [];
-        if (this.props.config.servers) {
-            servers = servers.concat(this.props.config.servers);
-        }
-
-        if (servers.indexOf(MatrixClientPeg.getHomeServerName()) == -1) {
-            servers.unshift(MatrixClientPeg.getHomeServerName());
-        }
-
-        for (const server of servers) {
-            options.push(this._makeMenuOption(server, null));
-            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
-                for (const network of this.props.config.serverConfig[server].networks) {
-                    options.push(this._makeMenuOption(server, network));
-                }
-            }
-        }
-
-        return options;
-    }
-
-    _makeMenuOption(server, network, wire_onclick) {
-        if (wire_onclick === undefined) wire_onclick = true;
-        let icon;
-        let name;
-        let span_class;
-
-        if (network === null) {
-            name = server;
-            span_class = 'mx_NetworkDropdown_menu_all';
-        } else if (network == '_matrix') {
-            name = 'Matrix';
-            icon = <img src="img/network-matrix.svg" width="16" height="16" />;
-            span_class = 'mx_NetworkDropdown_menu_network';
-        } else {
-            if (this.props.config.networks[network] === undefined) {
-                throw new Error(network + ' network missing from config');
-            }
-            if (this.props.config.networks[network].name) {
-                name = this.props.config.networks[network].name;
-            } else {
-                name = network;
-            }
-            if (this.props.config.networks[network].icon) {
-                // omit height here so if people define a non-square logo in the config, it
-                // will keep the aspect when it scales
-                icon = <img src={this.props.config.networks[network].icon} width="16" />;
-            } else {
-                icon = <img src={iconPath} width="16" height="16" />;
-            }
-
-            span_class = 'mx_NetworkDropdown_menu_network';
-        }
-
-        const click_handler = wire_onclick ? this.onMenuOptionClick.bind(this, server, network) : null;
-
-        let key = server;
-        if (network !== null) {
-            key += '_' + network;
-        }
-
-        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
-            {icon}
-            <span className={span_class}>{name}</span>
-        </div>;
-    }
-
-    render() {
-        let current_value;
-
-        let menu;
-        if (this.state.expanded) {
-            const menu_options = this._getMenuOptions();
-            menu = <div className="mx_NetworkDropdown_menu">
-                {menu_options}
-            </div>;
-            current_value = <input type="text" className="mx_NetworkDropdown_networkoption"
-                ref={this.collectInputTextBox} onKeyUp={this.onInputKeyUp}
-                placeholder="matrix.org" // 'matrix.org' as an example of an HS name
-            />
-        } else {
-            current_value = this._makeMenuOption(
-                this.state.selectedServer, this.state.selectedNetwork, false
-            );
-        }
-
-        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
-            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
-                {current_value}
-                <span className="mx_NetworkDropdown_arrow"></span>
-                {menu}
-            </div>
-        </div>;
-    }
-}
-
-NetworkDropdown.propTypes = {
-    onOptionChange: React.PropTypes.func.isRequired,
-    config: React.PropTypes.object,
-};
-
-NetworkDropdown.defaultProps = {
-    config: {
-        networks: [],
-    }
-};
-
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -1,189 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-
-var DateUtils = require('matrix-react-sdk/lib/DateUtils');
-var filesize = require('filesize');
-
-module.exports = React.createClass({
-    displayName: 'ImageView',
-
-    propTypes: {
-        src: React.PropTypes.string.isRequired, // the source of the image being displayed
-        name: React.PropTypes.string, // the main title ('name') for the image
-        link: React.PropTypes.string, // the link (if any) applied to the name of the image
-        width: React.PropTypes.number, // width of the image src in pixels
-        height: React.PropTypes.number, // height of the image src in pixels
-        fileSize: React.PropTypes.number, // size of the image src in bytes
-        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
-
-        // the event (if any) that the Image is displaying. Used for event-specific stuff like
-        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
-        // properties above, which let us use lightboxes to display images which aren't associated
-        // with events.
-        mxEvent: React.PropTypes.object,
-    },
-
-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
-    // dialog base class somehow, surely...
-    componentDidMount: function() {
-        document.addEventListener("keydown", this.onKeyDown);
-    },
-
-    componentWillUnmount: function() {
-        document.removeEventListener("keydown", this.onKeyDown);
-    },
-
-    onKeyDown: function(ev) {
-        if (ev.keyCode == 27) { // escape
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    },
-
-    onRedactClick: function() {
-        var self = this;
-        MatrixClientPeg.get().redactEvent(
-            this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-        ).done(function() {
-            if (self.props.onFinished) self.props.onFinished();
-        }, function(e) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            // display error message stating you couldn't delete this.
-            var code = e.errcode || e.statusCode;
-            Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: "You cannot delete this image. (" + code + ")"
-            });
-        });
-    },
-
-    getName: function () {
-        var name = this.props.name;
-        if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
-        }
-        return name;
-    },
-
-    render: function() {
-
-/*
-        // In theory max-width: 80%, max-height: 80% on the CSS should work
-        // but in practice, it doesn't, so do it manually:
-
-        var width = this.props.width || 500;
-        var height = this.props.height || 500;
-
-        var maxWidth = document.documentElement.clientWidth * 0.8;
-        var maxHeight = document.documentElement.clientHeight * 0.8;
-
-        var widthFrac = width / maxWidth;
-        var heightFrac = height / maxHeight;
-
-        var displayWidth;
-        var displayHeight;
-        if (widthFrac > heightFrac) {
-            displayWidth = Math.min(width, maxWidth);
-            displayHeight = (displayWidth / width) * height;
-        } else {
-            displayHeight = Math.min(height, maxHeight);
-            displayWidth = (displayHeight / height) * width;
-        }
-
-        var style = {
-            width: displayWidth,
-            height: displayHeight
-        };
-*/
-        var style, res;
-
-        if (this.props.width && this.props.height) {
-            style = {
-                width: this.props.width,
-                height: this.props.height,
-            };
-            res = style.width + "x" + style.height + "px";
-        }
-
-        var size;
-        if (this.props.fileSize) {
-            size = filesize(this.props.fileSize);
-        }
-
-        var size_res;
-        if (size && res) {
-            size_res = size + ", " + res;
-        }
-        else {
-            size_res = size || res;
-        }
-
-        var showEventMeta = !!this.props.mxEvent;
-
-        var eventMeta;
-        if(showEventMeta) {
-            eventMeta = (<div className="mx_ImageView_metadata">
-                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
-            </div>);
-        }
-
-        var eventRedact;
-        if(showEventMeta) {
-            eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
-                Redact
-            </div>);
-        }
-
-        return (
-            <div className="mx_ImageView">
-                <div className="mx_ImageView_lhs">
-                </div>
-                <div className="mx_ImageView_content">
-                    <img src={this.props.src} style={style}/>
-                    <div className="mx_ImageView_labelWrapper">
-                        <div className="mx_ImageView_label">
-                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
-                            <div className="mx_ImageView_shim">
-                            </div>
-                            <div className="mx_ImageView_name">
-                                { this.getName() }
-                            </div>
-                            { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank" rel="noopener">
-                                <div className="mx_ImageView_download">
-                                        Download this file<br/>
-                                         <span className="mx_ImageView_size">{ size_res }</span>
-                                </div>
-                            </a>
-                            { eventRedact }
-                            <div className="mx_ImageView_shim">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="mx_ImageView_rhs">
-                </div>
-            </div>
-        );
-    }
-});
--- a/src/components/views/globals/GuestWarningBar.js
+++ b/src/components/views/globals/GuestWarningBar.js
@@ -1,43 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-var React = require('react');
-var dis = require('matrix-react-sdk/lib/dispatcher')
-
-module.exports = React.createClass({
-    displayName: 'GuestWarningBar',
-
-    onRegisterClicked: function() {
-        dis.dispatch({'action': 'start_upgrade_registration'});
-    },
- 
-    onLoginClicked: function() {
-        dis.dispatch({'action': 'logout'});
-        dis.dispatch({'action': 'start_login'});
-    },
-
-    render: function() {
-        return (
-            <div className="mx_GuestWarningBar">
-                <img className="mx_GuestWarningBar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
-                    You are Rioting as a guest. <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>sign in</a> to access more rooms and features.
-                </div>
-            </div>
-        );
-    }
-});
-
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@@ -1,45 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var Notifier = require("matrix-react-sdk/lib/Notifier");
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'MatrixToolbar',
-
-    hideToolbar: function() {
-        Notifier.setToolbarHidden(true);
-    },
-
-    onClick: function() {
-        Notifier.setEnabled(true);
-    },
-
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div className="mx_MatrixToolbar_content">
-                    You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
-                </div>
-                <div className="mx_MatrixToolbar_close"><img src="img/cancel.svg" width="18" height="18" onClick={ this.hideToolbar } /></div>
-            </div>
-        );
-    }
-});
--- a/src/components/views/globals/NewVersionBar.js
+++ b/src/components/views/globals/NewVersionBar.js
@@ -1,65 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var sdk = require('matrix-react-sdk');
-import Modal from 'matrix-react-sdk/lib/Modal';
-
-/**
- * Check a version string is compatible with the Changelog
- * dialog
- */
-function checkVersion(ver) {
-    const parts = ver.split('-');
-    return parts[0] == 'vector' && parts[2] == 'react' && parts[4] == 'js';
-}
-
-export default function NewVersionBar(props) {
-    const onChangelogClicked = () => {
-        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
-
-        Modal.createDialog(ChangelogDialog, {
-            version: props.version,
-            newVersion: props.newVersion,
-            onFinished: (update) => {
-                if(update) {
-                    window.location.reload();
-                }
-            }
-        });
-    };
-
-    let changelog_button;
-    if (checkVersion(props.version) && checkVersion(props.newVersion)) {
-        changelog_button = <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>;
-    }
-    return (
-        <div className="mx_MatrixToolbar">
-            <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-            <div className="mx_MatrixToolbar_content">
-                A new version of Riot is available. Refresh your browser.
-            </div>
-            {changelog_button}
-        </div>
-    );
-}
-
-NewVersionBar.propTypes = {
-    version: React.PropTypes.string.isRequired,
-    newVersion: React.PropTypes.string.isRequired,
-};
--- a/src/components/views/login/VectorCustomServerDialog.js
+++ b/src/components/views/login/VectorCustomServerDialog.js
@@ -1,52 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-var React = require("react");
-
-module.exports = React.createClass({
-    displayName: 'VectorCustomServerDialog',
-    statics: {
-        replaces: 'CustomServerDialog',
-    },
-
-    render: function() {
-        return (
-            <div className="mx_ErrorDialog">
-                <div className="mx_Dialog_title">
-                    Custom Server Options
-                </div>
-                <div className="mx_Dialog_content">
-                    <span>
-                        You can use the custom server options to sign into other Matrix
-                        servers by specifying a different Home server URL.
-                        <br/>
-                        This allows you to use Riot with an existing Matrix account on
-                        a different home server.
-                        <br/>
-                        <br/>
-                        You can also set a custom identity server but you won't be able to
-                        invite users by email address, or be invited by email address yourself.
-                    </span>
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.props.onFinished} autoFocus={true}>
-                        Dismiss
-                    </button>
-                </div>
-            </div>
-        );
-    }
-});
--- a/src/components/views/login/VectorLoginFooter.js
+++ b/src/components/views/login/VectorLoginFooter.js
@@ -1,37 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'VectorLoginFooter',
-    statics: {
-        replaces: 'LoginFooter',
-    },
-
-    render: function() {
-        return (
-            <div className="mx_Login_links">
-                <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
-                <a href="https://twitter.com/@RiotChat">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
-                <a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
-                <a href="https://matrix.org">powered by Matrix</a>
-            </div>
-        );
-    }
-});
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -1,56 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday"
-];
-
-module.exports = React.createClass({
-    displayName: 'DateSeparator',
-    render: function() {
-        var date = new Date(this.props.ts);
-        var today = new Date();
-        var yesterday = new Date();
-        yesterday.setDate(today.getDate() - 1);
-        var label;
-        if (date.toDateString() === today.toDateString()) {
-            label = "Today";
-        }
-        else if (date.toDateString() === yesterday.toDateString()) {
-            label = "Yesterday";
-        }
-        else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            label = days[date.getDay()];
-        }
-        else {
-            label = date.toDateString();
-        }
-
-        return (
-            <h2>{ label }</h2>
-        );
-    }
-});
--- a/src/components/views/rooms/DNDRoomTile.js
+++ b/src/components/views/rooms/DNDRoomTile.js
@@ -1,211 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var DragSource = require('react-dnd').DragSource;
-var DropTarget = require('react-dnd').DropTarget;
-
-var dis = require("matrix-react-sdk/lib/dispatcher");
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var sdk = require('matrix-react-sdk');
-var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
-
-/**
- * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
- * Requires extra props:
- *   roomSubList: React.PropTypes.object.isRequired,
- *   refreshSubList: React.PropTypes.func.isRequired,
- */
-
-/**
- * Specifies the drag source contract.
- * Only `beginDrag` function is required.
- */
-var roomTileSource = {
-    canDrag: function(props, monitor) {
-        return props.roomSubList.props.editable;
-    },
-
-    beginDrag: function (props) {
-        // Return the data describing the dragged item
-        var item = {
-            room: props.room,
-            originalList: props.roomSubList,
-            originalIndex: props.roomSubList.findRoomTile(props.room).index,
-            targetList: props.roomSubList, // at first target is same as original
-            // lastTargetRoom: null,
-            // lastYOffset: null,
-            // lastYDelta: null,
-        };
-
-        if (props.roomSubList.debug) console.log("roomTile beginDrag for " + item.room.roomId);
-
-        // doing this 'correctly' with state causes react-dnd to break seemingly due to the state transitions
-        props.room._dragging = true;
-
-        return item;
-    },
-
-    endDrag: function (props, monitor, component) {
-        var item = monitor.getItem();
-
-        if (props.roomSubList.debug) console.log("roomTile endDrag for " + item.room.roomId + " with didDrop=" + monitor.didDrop());
-
-        props.room._dragging = false;
-        if (monitor.didDrop()) {
-            if (props.roomSubList.debug) console.log("force updating component " + item.targetList.props.label);
-            item.targetList.forceUpdate(); // as we're not using state
-        }
-
-        if (monitor.didDrop() && item.targetList.props.editable) {
-            // if we moved lists, remove the old tag
-            if (item.targetList !== item.originalList && item.originalList.props.tagName) {
-                // commented out attempts to set a spinner on our target component as component is actually
-                // the original source component being dragged, not our target.  To fix we just need to
-                // move all of this to endDrop in the target instead.  FIXME later.
-
-                //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 });
-                MatrixClientPeg.get().deleteRoomTag(item.room.roomId, item.originalList.props.tagName).finally(function() {
-                    //component.state.set({ spinner: component.state.spinner-- });
-                }).fail(function(err) {
-                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
-                        title: "Failed to remove tag " + item.originalList.props.tagName + " from room",
-                        description: err.toString()
-                    });
-                });
-            }
-
-            var newOrder= {};
-            if (item.targetList.props.order === 'manual') {
-                newOrder['order'] = item.targetList.calcManualOrderTagData(item.room);
-            }
-
-            // if we moved lists or the ordering changed, add the new tag
-            if (item.targetList.props.tagName && (item.targetList !== item.originalList || newOrder)) {
-                //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 });
-                MatrixClientPeg.get().setRoomTag(item.room.roomId, item.targetList.props.tagName, newOrder).finally(function() {
-                    //component.state.set({ spinner: component.state.spinner-- });
-                }).fail(function(err) {
-                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
-                        title: "Failed to add tag " + item.targetList.props.tagName + " to room",
-                        description: err.toString()
-                    });
-                });
-            }
-        }
-        else {
-            // cancel the drop and reset our original position
-            if (props.roomSubList.debug) console.log("cancelling drop & drag");
-            props.roomSubList.moveRoomTile(item.room, item.originalIndex);
-            if (item.targetList && item.targetList !== item.originalList) {
-                item.targetList.removeRoomTile(item.room);
-            }
-        }
-    }
-};
-
-var roomTileTarget = {
-    canDrop: function() {
-        return false;
-    },
-
-    hover: function(props, monitor) {
-        var item = monitor.getItem();
-        //var off = monitor.getClientOffset();
-        // console.log("hovering on room " + props.room.roomId + ", isOver=" + monitor.isOver());
-
-        //console.log("item.targetList=" + item.targetList + ", roomSubList=" + props.roomSubList);
-
-        var switchedTarget = false;
-        if (item.targetList !== props.roomSubList) {
-            // we've switched target, so remove the tile from the previous target.
-            // n.b. the previous target might actually be the source list.
-            if (props.roomSubList.debug) console.log("switched target sublist");
-            switchedTarget = true;
-            item.targetList.removeRoomTile(item.room);
-            item.targetList = props.roomSubList;
-        }
-
-        if (!item.targetList.props.editable) return;
-
-        if (item.targetList.props.order === 'manual') {
-            if (item.room.roomId !== props.room.roomId && props.room !== item.lastTargetRoom) {
-                // find the offset of the target tile in the list.
-                var roomTile = props.roomSubList.findRoomTile(props.room);
-                // shuffle the list to add our tile to that position.
-                props.roomSubList.moveRoomTile(item.room, roomTile.index);
-            }
-
-            // stop us from flickering between our droptarget and the previous room.
-            // whenever the cursor changes direction we have to reset the flicker-damping.
-/*
-            var yDelta = off.y - item.lastYOffset;
-
-            if ((yDelta > 0 && item.lastYDelta < 0) ||
-                (yDelta < 0 && item.lastYDelta > 0))
-            {
-                // the cursor changed direction - forget our previous room
-                item.lastTargetRoom = null;
-            }
-            else {
-                // track the last room we were hovering over so we can stop
-                // bouncing back and forth if the droptarget is narrower than
-                // the other list items.  The other way to do this would be
-                // to reduce the size of the hittarget on the list items, but
-                // can't see an easy way to do that.
-                item.lastTargetRoom = props.room;
-            }
-
-            if (yDelta) item.lastYDelta = yDelta;
-            item.lastYOffset = off.y;
-*/
-        }
-        else if (switchedTarget) {
-            if (!props.roomSubList.findRoomTile(item.room).room) {
-                // add to the list in the right place
-                props.roomSubList.moveRoomTile(item.room, 0);
-            }
-            // we have to sort the list whatever to recalculate it
-            props.roomSubList.sortList();
-        }
-    },
-};
-
-// Export the wrapped version, inlining the 'collect' functions
-// to more closely resemble the ES7
-module.exports =
-DropTarget('RoomTile', roomTileTarget, function(connect, monitor) {
-    return {
-        // Call this function inside render()
-        // to let React DnD handle the drag events:
-        connectDropTarget: connect.dropTarget(),
-        isOver: monitor.isOver(),
-    }
-})(
-DragSource('RoomTile', roomTileSource, function(connect, monitor) {
-    return {
-        // Call this function inside render()
-        // to let React DnD handle the drag events:
-        connectDragSource: connect.dragSource(),
-        // You can ask the monitor about the current drag state:
-        isDragging: monitor.isDragging()
-    };
-})(RoomTile));
-
--- a/src/components/views/rooms/RoomDropTarget.js
+++ b/src/components/views/rooms/RoomDropTarget.js
@@ -1,42 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'RoomDropTarget',
-
-    render: function() {
-        if (this.props.placeholder) {
-            return (
-                <div className="mx_RoomDropTarget mx_RoomDropTarget_placeholder">
-                </div>
-            );
-        }
-        else {
-            return (
-                <div className="mx_RoomDropTarget">
-                    <div className="mx_RoomDropTarget_avatar"></div>
-                    <div className="mx_RoomDropTarget_label">
-                        { this.props.label }
-                    </div>
-                </div>
-            );
-        }
-    }
-});
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -1,97 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-
-module.exports = React.createClass({
-    displayName: 'RoomTooltip',
-
-    propTypes: {
-        // Alllow the tooltip to be styled by the parent element
-        className: React.PropTypes.string.isRequired,
-        // The tooltip is derived from either the room name or a label
-        room: React.PropTypes.object,
-        label: React.PropTypes.string,
-    },
-
-    // Create a wrapper for the tooltip outside the parent and attach it to the body element
-    componentDidMount: function() {
-        this.tooltipContainer = document.createElement("div");
-        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
-        document.body.appendChild(this.tooltipContainer);
-
-        this._renderTooltip();
-    },
-
-    componentDidUpdate: function() {
-        this._renderTooltip();
-    },
-
-    // Remove the wrapper element, as the tooltip has finished using it
-    componentWillUnmount: function() {
-        dis.dispatch({
-            action: 'view_tooltip',
-            tooltip: null,
-            parent: null,
-        });
-
-        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
-        document.body.removeChild(this.tooltipContainer);
-    },
-
-    _renderTooltip: function() {
-        var label = this.props.room ? this.props.room.name : this.props.label;
-
-        // Add the parent's position to the tooltips, so it's correctly
-        // positioned, also taking into account any window zoom
-        // NOTE: The additional 6 pixels for the left position, is to take account of the
-        // tooltips chevron
-        var parent = ReactDOM.findDOMNode(this);
-        var style = {};
-        style.top = parent.getBoundingClientRect().top + window.pageYOffset;
-        style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
-        style.display = "block";
-
-        var tooltip = (
-            <div className="mx_RoomTooltip" style={style} >
-                <div className="mx_RoomTooltip_chevron"></div>
-                { label }
-            </div>
-        );
-
-        // Render the tooltip manually, as we wish it not to be rendered within the parent
-        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
-
-        // Tell the roomlist about us so it can manipulate us if it wishes
-        dis.dispatch({
-            action: 'view_tooltip',
-            tooltip: this.tooltip,
-            parent: parent,
-        });
-    },
-
-    render: function() {
-        // Render a placeholder
-        return (
-            <div className={ this.props.className } >
-            </div>
-        );
-    }
-});
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -1,69 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var sdk = require('matrix-react-sdk');
-var classNames = require('classnames');
-
-module.exports = React.createClass({
-    displayName: 'SearchBar',
-
-    getInitialState: function() {
-        return ({
-            scope: 'Room'
-        });
-    },
-
-    onThisRoomClick: function() {
-        this.setState({ scope: 'Room' });
-    },
-
-    onAllRoomsClick: function() {
-        this.setState({ scope: 'All' });
-    },
-
-    onSearchChange: function(e) {
-        if (e.keyCode === 13) { // on enter...
-            this.onSearch();
-        }
-        if (e.keyCode === 27) { // escape...
-            this.props.onCancelClick();
-        }
-    },
-
-    onSearch: function() {
-        this.props.onSearch(this.refs.search_term.value, this.state.scope);
-    },
-
-    render: function() {
-        var searchButtonClasses = classNames({ mx_SearchBar_searchButton : true, mx_SearchBar_searching: this.props.searchInProgress });
-        var thisRoomClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'Room' });
-        var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' });
-
-        return (
-            <div className="mx_SearchBar">
-                <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder="Search..." onKeyDown={this.onSearchChange}/>
-                <div className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></div>
-                <div className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</div>
-                <div className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</div>
-                <img className="mx_SearchBar_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.props.onCancelClick} />
-            </div>
-        );
-    }
-});
--- a/src/components/views/settings/IntegrationsManager.js
+++ b/src/components/views/settings/IntegrationsManager.js
@@ -1,63 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var sdk = require('matrix-react-sdk');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-
-module.exports = React.createClass({
-    displayName: 'IntegrationsManager',
-
-    propTypes: {
-        src: React.PropTypes.string.isRequired, // the source of the integration manager being embedded
-        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
-    },
-
-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
-    // dialog base class somehow, surely...
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        document.addEventListener("keydown", this.onKeyDown);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-        document.removeEventListener("keydown", this.onKeyDown);
-    },
-
-    onKeyDown: function(ev) {
-        if (ev.keyCode == 27) { // escape
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    },
-
-    onAction: function(payload) {
-        if (payload.action === 'close_scalar') {
-            this.props.onFinished();
-        }
-    },
-
-    render: function() {
-        return (
-            <iframe src={ this.props.src }></iframe>
-        );
-    }
-});
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -1,866 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-var React = require('react');
-var q = require("q");
-var sdk = require('matrix-react-sdk');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
-var Modal = require('matrix-react-sdk/lib/Modal');
-
-var notifications = require('../../../notifications');
-
-// TODO: this "view" component still has far too much application logic in it,
-// which should be factored out to other files.
-
-// TODO: this component also does a lot of direct poking into this.state, which
-// is VERY NAUGHTY.
-
-var NotificationUtils = notifications.NotificationUtils;
-var VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
-var PushRuleVectorState = notifications.PushRuleVectorState;
-var ContentRules = notifications.ContentRules;
-
-/**
- * Rules that Vector used to set in order to override the actions of default rules.
- * These are used to port peoples existing overrides to match the current API.
- * These can be removed and forgotten once everyone has moved to the new client.
- */
-var LEGACY_RULES = {
-    "im.vector.rule.contains_display_name": ".m.rule.contains_display_name",
-    "im.vector.rule.room_one_to_one": ".m.rule.room_one_to_one",
-    "im.vector.rule.room_message": ".m.rule.message",
-    "im.vector.rule.invite_for_me": ".m.rule.invite_for_me",
-    "im.vector.rule.call": ".m.rule.call",
-    "im.vector.rule.notices": ".m.rule.suppress_notices"
-};
-
-function portLegacyActions(actions) {
-    var decoded = NotificationUtils.decodeActions(actions);
-    if (decoded !== null) {
-        return NotificationUtils.encodeActions(decoded);
-    } else {
-        // We don't recognise one of the actions here, so we don't try to
-        // canonicalise them.
-        return actions;
-    }
-}
-
-module.exports = React.createClass({
-    displayName: 'Notififications',
-
-    phases: {
-        LOADING: "LOADING", // The component is loading or sending data to the hs
-        DISPLAY: "DISPLAY", // The component is ready and display data
-        ERROR: "ERROR"      // There was an error
-    },
-
-    propTypes: {
-        // The array of threepids from the JS SDK (required for email notifications)
-        threepids: React.PropTypes.array.isRequired,
-        // The brand string set when creating an email pusher
-        brand: React.PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-        return {
-            threepids: []
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            phase: this.phases.LOADING,
-            masterPushRule: undefined,      // The master rule ('.m.rule.master')
-            vectorPushRules: [],            // HS default push rules displayed in Vector UI
-            vectorContentRules: {           // Keyword push rules displayed in Vector UI
-                vectorState: PushRuleVectorState.ON,
-                rules: []
-            },
-            externalPushRules: [],          // Push rules (except content rule) that have been defined outside Vector UI
-            externalContentRules: []        // Keyword push rules that have been defined outside Vector UI
-        };
-    },
-
-    componentWillMount: function() {
-        this._refreshFromServer();
-    },
-
-    onEnableNotificationsChange: function(event) {
-        var self = this;
-        this.setState({
-            phase: this.phases.LOADING
-        });
-
-        MatrixClientPeg.get().setPushRuleEnabled('global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !event.target.checked).done(function() {
-           self._refreshFromServer();
-        });
-    },
-
-    onEnableDesktopNotificationsChange: function(event) {
-        UserSettingsStore.setEnableNotifications(event.target.checked);
-    },
-
-    onEnableEmailNotificationsChange: function(address, event) {
-        var emailPusherPromise;
-        if (event.target.checked) {
-            var data = {}
-            data['brand'] = this.props.brand || 'Riot';
-            emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
-        } else {
-            var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
-            emailPusher.kind = null;
-            emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher);
-        }
-        emailPusherPromise.done(() => {
-            this._refreshFromServer();
-        }, (error) => {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Error saving email notification preferences",
-                description: "An error occurred whilst saving your email notification preferences.",
-            });
-        });
-    },
-
-    onNotifStateButtonClicked: function(event) {
-        // FIXME: use .bind() rather than className metadata here surely
-        var vectorRuleId = event.target.className.split("-")[0];
-        var newPushRuleVectorState = event.target.className.split("-")[1];
-
-        if ("_keywords" === vectorRuleId) {
-            this._setKeywordsPushRuleVectorState(newPushRuleVectorState)
-        }
-        else {
-            var rule = this.getRule(vectorRuleId);
-            if (rule) {
-                this._setPushRuleVectorState(rule, newPushRuleVectorState);
-            }
-        }
-    },
-
-    onKeywordsClicked: function(event) {
-        var self = this;
-
-        // Compute the keywords list to display
-        var keywords = [];
-        for (var i in this.state.vectorContentRules.rules) {
-            var rule = this.state.vectorContentRules.rules[i];
-            keywords.push(rule.pattern);
-        }
-        if (keywords.length) {
-            // As keeping the order of per-word push rules hs side is a bit tricky to code,
-            // display the keywords in alphabetical order to the user
-            keywords.sort();
-
-            keywords = keywords.join(", ");
-        }
-        else {
-            keywords = "";
-        }
-
-        var TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
-        Modal.createDialog(TextInputDialog, {
-            title: "Keywords",
-            description: "Enter keywords separated by a comma:",
-            value: keywords,
-            onFinished: function onFinished(should_leave, newValue) {
-
-                if (should_leave && newValue !== keywords) {
-                    var newKeywords = newValue.split(',');
-                    for (var i in newKeywords) {
-                        newKeywords[i] = newKeywords[i].trim();
-                    }
-
-                    // Remove duplicates and empty
-                    newKeywords = newKeywords.reduce(function(array, keyword){
-                        if (keyword !== "" && array.indexOf(keyword) < 0) {
-                            array.push(keyword);
-                        }
-                        return array;
-                    },[]);
-
-                    self._setKeywords(newKeywords);
-                }
-            }
-        });
-    },
-
-    getRule: function(vectorRuleId) {
-        for (var i in this.state.vectorPushRules) {
-            var rule = this.state.vectorPushRules[i];
-            if (rule.vectorRuleId === vectorRuleId) {
-                return rule;
-            }
-        }
-    },
-
-    _setPushRuleVectorState: function(rule, newPushRuleVectorState) {
-        if (rule && rule.vectorState !== newPushRuleVectorState) {
-
-            this.setState({
-                phase: this.phases.LOADING
-            });
-
-            var self = this;
-            var cli = MatrixClientPeg.get();
-            var deferreds = [];
-            var ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId];
-
-            if (rule.rule) {
-                var actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];
-
-                if (!actions) {
-                    // The new state corresponds to disabling the rule.
-                    deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false));
-                }
-                else {
-                    // The new state corresponds to enabling the rule and setting specific actions
-                    deferreds.push(this._updatePushRuleActions(rule.rule, actions, true));
-                }
-            }
-
-            q.all(deferreds).done(function() {
-                self._refreshFromServer();
-            }, function(error) {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Can't change settings",
-                    description: error.toString(),
-                    onFinished: self._refreshFromServer
-                });
-            });
-        }
-    },
-
-    _setKeywordsPushRuleVectorState: function(newPushRuleVectorState) {
-        // Is there really a change?
-        if (this.state.vectorContentRules.vectorState === newPushRuleVectorState
-            || this.state.vectorContentRules.rules.length === 0) {
-            return;
-        }
-
-        var self = this;
-        var cli = MatrixClientPeg.get();
-
-        this.setState({
-            phase: this.phases.LOADING
-        });
-
-        // Update all rules in self.state.vectorContentRules
-        var deferreds = [];
-        for (var i in this.state.vectorContentRules.rules) {
-            var rule = this.state.vectorContentRules.rules[i];
-
-            var enabled, actions;
-            switch (newPushRuleVectorState) {
-                case PushRuleVectorState.ON:
-                    if (rule.actions.length !== 1) {
-                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.ON);
-                    }
-
-                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
-                        enabled = true;
-                    }
-                    break;
-
-                case PushRuleVectorState.LOUD:
-                    if (rule.actions.length !== 3) {
-                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.LOUD);
-                    }
-
-                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
-                        enabled = true;
-                    }
-                    break;
-
-                case PushRuleVectorState.OFF:
-                    enabled = false;
-                    break;
-            }
-
-            if (actions) {
-                // Note that the workaround in _updatePushRuleActions will automatically
-                // enable the rule
-                deferreds.push(this._updatePushRuleActions(rule, actions, enabled));
-            }
-            else if (enabled != undefined) {
-                deferreds.push(cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled));
-            }
-        }
-
-        q.all(deferreds).done(function(resps) {
-            self._refreshFromServer();
-        }, function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Can't update user notification settings",
-                description: error.toString(),
-                onFinished: self._refreshFromServer
-            });
-        });
-    },
-
-    _setKeywords: function(newKeywords) {
-        this.setState({
-            phase: this.phases.LOADING
-        });
-
-        var self = this;
-        var cli = MatrixClientPeg.get();
-        var removeDeferreds = [];
-
-        // Remove per-word push rules of keywords that are no more in the list
-        var vectorContentRulesPatterns = [];
-        for (var i in self.state.vectorContentRules.rules) {
-            var rule = self.state.vectorContentRules.rules[i];
-
-            vectorContentRulesPatterns.push(rule.pattern);
-
-            if (newKeywords.indexOf(rule.pattern) < 0) {
-                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
-            }
-        }
-
-        // If the keyword is part of `externalContentRules`, remove the rule
-        // before recreating it in the right Vector path
-        for (var i in self.state.externalContentRules) {
-            var rule = self.state.externalContentRules[i];
-
-            if (newKeywords.indexOf(rule.pattern) >= 0) {
-                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
-            }
-        }
-
-        var onError = function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Can't update keywords",
-                description: error.toString(),
-                onFinished: self._refreshFromServer
-            });
-        }
-
-        // Then, add the new ones
-        q.all(removeDeferreds).done(function(resps) {
-            var deferreds = [];
-
-            var pushRuleVectorStateKind = self.state.vectorContentRules.vectorState;
-            if (pushRuleVectorStateKind === PushRuleVectorState.OFF) {
-                // When the current global keywords rule is OFF, we need to look at
-                // the flavor of rules in 'vectorContentRules' to apply the same actions
-                // when creating the new rule.
-                // Thus, this new rule will join the 'vectorContentRules' set.
-                if (self.state.vectorContentRules.rules.length) {
-                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
-                }
-                else {
-                    // ON is default
-                    pushRuleVectorStateKind =  PushRuleVectorState.ON;
-                }
-            }
-
-            for (var i in newKeywords) {
-                var keyword = newKeywords[i];
-
-                if (vectorContentRulesPatterns.indexOf(keyword) < 0) {
-                    if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
-                        deferreds.push(cli.addPushRule
-                        ('global', 'content', keyword, {
-                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
-                           pattern: keyword
-                        }));
-                    }
-                    else {
-                        deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
-                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
-                           pattern: keyword
-                        }));
-                    }
-                }
-            }
-
-            q.all(deferreds).done(function(resps) {
-                self._refreshFromServer();
-            }, onError);
-        }, onError);
-    },
-
-    // Create a push rule but disabled
-    _addDisabledPushRule: function(scope, kind, ruleId, body) {
-        var cli = MatrixClientPeg.get();
-        return cli.addPushRule(scope, kind, ruleId, body).then(function() {
-            return cli.setPushRuleEnabled(scope, kind, ruleId, false);
-        });
-    },
-
-    // Check if any legacy im.vector rules need to be ported to the new API
-    // for overriding the actions of default rules.
-    _portRulesToNewAPI: function(rulesets) {
-        var self = this;
-        var needsUpdate = [];
-        var cli = MatrixClientPeg.get();
-
-        for (var kind in rulesets.global) {
-            var ruleset = rulesets.global[kind];
-            for (var i = 0; i < ruleset.length; ++i) {
-                var rule = ruleset[i];
-                if (rule.rule_id in LEGACY_RULES) {
-                    console.log("Porting legacy rule", rule);
-                    needsUpdate.push( function(kind, rule) {
-                        return cli.setPushRuleActions(
-                            'global', kind, LEGACY_RULES[rule.rule_id], portLegacyActions(rule.actions)
-                        ).then( function() {
-                            return cli.deletePushRule('global', kind, rule.rule_id);
-                        })
-                    }(kind, rule));
-                }
-            }
-        }
-
-        if (needsUpdate.length > 0) {
-            // If some of the rules need to be ported then wait for the porting
-            // to happen and then fetch the rules again.
-            return q.allSettled(needsUpdate).then( function() {
-                return cli.getPushRules();
-            });
-        } else {
-            // Otherwise return the rules that we already have.
-            return rulesets;
-        }
-    },
-
-    _refreshFromServer: function() {
-        var self = this;
-        var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
-            //console.log("resolving pushRulesPromise");
-
-            /// XXX seriously? wtf is this?
-            MatrixClientPeg.get().pushRules = rulesets;
-
-            // Get homeserver default rules and triage them by categories
-            var rule_categories = {
-                // The master rule (all notifications disabling)
-                '.m.rule.master': 'master',
-
-                // The default push rules displayed by Vector UI
-                // XXX: .m.rule.contains_user_name is not managed (not a fancy rule for Vector?)
-                '.m.rule.contains_display_name': 'vector',
-                '.m.rule.room_one_to_one': 'vector',
-                '.m.rule.message': 'vector',
-                '.m.rule.invite_for_me': 'vector',
-                //'.m.rule.member_event': 'vector',
-                '.m.rule.call': 'vector',
-                '.m.rule.suppress_notices': 'vector'
-
-                // Others go to others
-            };
-
-            // HS default rules
-            var defaultRules = {master: [], vector: {}, others: []};
-
-            for (var kind in rulesets.global) {
-                for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
-                    var r = rulesets.global[kind][i];
-                    var cat = rule_categories[r.rule_id];
-                    r.kind = kind;
-
-                    if (r.rule_id[0] === '.') {
-                        if (cat === 'vector') {
-                            defaultRules.vector[r.rule_id] = r;
-                        }
-                        else if (cat === 'master') {
-                            defaultRules.master.push(r);
-                        }
-                        else {
-                            defaultRules['others'].push(r);
-                        }
-                    }
-                }
-            }
-
-            // Get the master rule if any defined by the hs
-            if (defaultRules.master.length > 0) {
-                self.state.masterPushRule = defaultRules.master[0];
-            }
-
-            // parse the keyword rules into our state
-            var contentRules = ContentRules.parseContentRules(rulesets);
-            self.state.vectorContentRules = {
-                vectorState: contentRules.vectorState,
-                rules: contentRules.rules,
-            };
-            self.state.externalContentRules = contentRules.externalRules;
-
-            // Build the rules displayed in the Vector UI matrix table
-            self.state.vectorPushRules = [];
-            self.state.externalPushRules = [];
-
-            var vectorRuleIds = [
-                '.m.rule.contains_display_name',
-                '_keywords',
-                '.m.rule.room_one_to_one',
-                '.m.rule.message',
-                '.m.rule.invite_for_me',
-                //'im.vector.rule.member_event',
-                '.m.rule.call',
-                '.m.rule.suppress_notices'
-            ];
-            for (var i in vectorRuleIds) {
-                var vectorRuleId = vectorRuleIds[i];
-
-                if (vectorRuleId === '_keywords') {
-                    // keywords needs a special handling
-                    // For Vector UI, this is a single global push rule but translated in Matrix,
-                    // it corresponds to all content push rules (stored in self.state.vectorContentRule)
-                    self.state.vectorPushRules.push({
-                        "vectorRuleId": "_keywords",
-                        "description" : (<span>Messages containing <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>keywords</span></span>),
-                        "vectorState": self.state.vectorContentRules.vectorState
-                    });
-                }
-                else {
-                    var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
-                    var rule = defaultRules.vector[vectorRuleId];
-
-                    var vectorState = ruleDefinition.ruleToVectorState(rule);
-
-                    //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);
-
-                    self.state.vectorPushRules.push({
-                        "vectorRuleId": vectorRuleId,
-                        "description" : ruleDefinition.description,
-                        "rule": rule,
-                        "vectorState": vectorState,
-                    });
-
-                    // if there was a rule which we couldn't parse, add it to the external list
-                    if (rule && !vectorState) {
-                        rule.description = ruleDefinition.description;
-                        self.state.externalPushRules.push(rule);
-                    }
-                }
-            }
-
-            // Build the rules not managed by Vector UI
-            var otherRulesDescriptions = {
-                '.m.rule.message': "Notify for all other messages/rooms",
-                '.m.rule.fallback': "Notify me for anything else"
-            };
-
-            for (var i in defaultRules.others) {
-                var rule = defaultRules.others[i];
-                var ruleDescription = otherRulesDescriptions[rule.rule_id];
-
-                // Show enabled default rules that was modified by the user
-                if (ruleDescription && rule.enabled && !rule.default) {
-                    rule.description = ruleDescription;
-                    self.state.externalPushRules.push(rule);
-                }
-            }
-        });
-
-        var pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
-            //console.log("resolving pushersPromise");
-            self.setState({pushers: resp.pushers});
-        });
-
-        q.all([pushRulesPromise, pushersPromise]).then(function() {
-            self.setState({
-                phase: self.phases.DISPLAY
-            });
-        }, function(error) {
-            self.setState({
-                phase: self.phases.ERROR
-            });
-        }).finally(() => {
-            // actually explicitly update our state  having been deep-manipulating it
-            self.setState({
-                masterPushRule: self.state.masterPushRule,
-                vectorContentRules: self.state.vectorContentRules,
-                vectorPushRules: self.state.vectorPushRules,
-                externalContentRules: self.state.externalContentRules,
-                externalPushRules: self.state.externalPushRules,
-            });
-        }).done();
-    },
-
-    _updatePushRuleActions: function(rule, actions, enabled) {
-        var cli = MatrixClientPeg.get();
-
-        return cli.setPushRuleActions(
-            'global', rule.kind, rule.rule_id, actions
-        ).then( function() {
-            // Then, if requested, enabled or disabled the rule
-            if (undefined != enabled) {
-                return cli.setPushRuleEnabled(
-                    'global', rule.kind, rule.rule_id, enabled
-                );
-            }
-        });
-    },
-
-    renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
-        return (
-            <tr key={ className }>
-                <th>
-                    {title}
-                </th>
-
-                <th>
-                    <input className= {className + "-" + PushRuleVectorState.OFF}
-                        type="radio"
-                        checked={ pushRuleVectorState === PushRuleVectorState.OFF }
-                        onChange={ this.onNotifStateButtonClicked } />
-                </th>
-
-                <th>
-                    <input className= {className + "-" + PushRuleVectorState.ON}
-                        type="radio"
-                        checked={ pushRuleVectorState === PushRuleVectorState.ON }
-                        onChange={ this.onNotifStateButtonClicked } />
-                </th>
-
-                <th>
-                    <input className= {className + "-" + PushRuleVectorState.LOUD}
-                        type="radio"
-                        checked={ pushRuleVectorState === PushRuleVectorState.LOUD }
-                        onChange={ this.onNotifStateButtonClicked } />
-                </th>
-            </tr>
-        );
-    },
-
-    renderNotifRulesTableRows: function() {
-        var rows = [];
-        for (var i in this.state.vectorPushRules) {
-            var rule = this.state.vectorPushRules[i];
-            //console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState);
-            rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
-        }
-        return rows;
-    },
-
-    emailNotificationsRow: function(address, label) {
-        return (<div className="mx_UserNotifSettings_tableRow">
-            <div className="mx_UserNotifSettings_inputCell">
-                <input id="enableEmailNotifications_{address}"
-                    ref="enableEmailNotifications_{address}"
-                    type="checkbox"
-                    checked={ UserSettingsStore.hasEmailPusher(this.state.pushers, address) }
-                    onChange={ this.onEnableEmailNotificationsChange.bind(this, address) }
-                />
-            </div>
-            <div className="mx_UserNotifSettings_labelCell">
-                <label htmlFor="enableEmailNotifications_{address}">
-                    {label}
-                </label>
-            </div>
-        </div>);
-    },
-
-    render: function() {
-        var self = this;
-
-        var spinner;
-        if (this.state.phase === this.phases.LOADING) {
-            var Loader = sdk.getComponent("elements.Spinner");
-            spinner = <Loader />;
-        }
-
-        if (this.state.masterPushRule) {
-            var masterPushRuleDiv = (
-                <div className="mx_UserNotifSettings_tableRow">
-                        <div className="mx_UserNotifSettings_inputCell">
-                            <input id="enableNotifications"
-                                ref="enableNotifications"
-                                type="checkbox"
-                                checked={ !this.state.masterPushRule.enabled }
-                                onChange={ this.onEnableNotificationsChange } />
-                        </div>
-                        <div className="mx_UserNotifSettings_labelCell">
-                            <label htmlFor="enableNotifications">
-                                Enable notifications for this account
-                            </label>
-                        </div>
-                    </div>
-            );
-        }
-
-        // When enabled, the master rule inhibits all existing rules
-        // So do not show all notification settings
-        if (this.state.masterPushRule && this.state.masterPushRule.enabled) {
-            return (
-                <div>
-                    {masterPushRuleDiv}
-
-                    <div className="mx_UserSettings_notifTable">
-                        All notifications are currently disabled for all targets.
-                    </div>
-                </div>
-            );
-        }
-
-        var emailNotificationsRow;
-        if (this.props.threepids.filter(function(tp) {
-                if (tp.medium == "email") {
-                    return true;
-                }
-            }).length == 0) {
-            emailNotificationsRow = <div>
-                Add an email address above to configure email notifications
-            </div>;
-        } else {
-            // This only supports the first email address in your profile for now
-            emailNotificationsRow = this.emailNotificationsRow(
-                this.props.threepids[0].address,
-                "Enable email notifications ("+this.props.threepids[0].address+")"
-            );
-        }
-
-        // Build external push rules
-        var externalRules = [];
-        for (var i in this.state.externalPushRules) {
-            var rule = this.state.externalPushRules[i];
-            externalRules.push(<li>{ rule.description }</li>);
-        }
-
-        // Show keywords not displayed by the vector UI as a single external push rule
-        var externalKeyWords = [];
-        for (var i in this.state.externalContentRules) {
-            var rule = this.state.externalContentRules[i];
-            externalKeyWords.push(rule.pattern);
-        }
-        if (externalKeyWords.length) {
-            externalKeyWords = externalKeyWords.join(", ");
-            externalRules.push(<li>Notifications on the following keywords follow rules which can’t be displayed here: { externalKeyWords }</li>);
-        }
-
-        var devicesSection;
-        if (this.state.pushers === undefined) {
-            devicesSection = <div className="error">Unable to fetch notification target list</div>
-        } else if (this.state.pushers.length == 0) {
-            devicesSection = null;
-        } else {
-            // TODO: It would be great to be able to delete pushers from here too,
-            // and this wouldn't be hard to add.
-            var rows = [];
-            for (var i = 0; i < this.state.pushers.length; ++i) {
-                rows.push(<tr key={ i }>
-                    <td>{this.state.pushers[i].app_display_name}</td>
-                    <td>{this.state.pushers[i].device_display_name}</td>
-                </tr>);
-            }
-            devicesSection = (<table className="mx_UserSettings_devicesTable">
-                <tbody>
-                    {rows}
-                </tbody>
-            </table>);
-        }
-        if (devicesSection) {
-            devicesSection = (<div>
-                <h3>Notification targets</h3>
-                { devicesSection }
-            </div>);
-        }
-
-        var advancedSettings;
-        if (externalRules.length) {
-            advancedSettings = (
-                <div>
-                    <h3>Advanced notifications settings</h3>
-                    There are advanced notifications which are not shown here.<br/>
-                    You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply.
-                    <ul>
-                        { externalRules }
-                    </ul>
-                </div>
-            );
-        }
-
-        return (
-            <div>
-
-                {masterPushRuleDiv}
-
-                <div className="mx_UserSettings_notifTable">
-
-                    { spinner }
-
-                    <div className="mx_UserNotifSettings_tableRow">
-                        <div className="mx_UserNotifSettings_inputCell">
-                            <input id="enableDesktopNotifications"
-                                ref="enableDesktopNotifications"
-                                type="checkbox"
-                                checked={ UserSettingsStore.getEnableNotifications() }
-                                onChange={ this.onEnableDesktopNotificationsChange } />
-                        </div>
-                        <div className="mx_UserNotifSettings_labelCell">
-                            <label htmlFor="enableDesktopNotifications">
-                                Enable desktop notifications
-                            </label>
-                        </div>
-                    </div>
-
-                    <div className="mx_UserNotifSettings_tableRow">
-                        <div className="mx_UserNotifSettings_inputCell">
-                            <input id="enableDesktopAudioNotifications"
-                                ref="enableDesktopAudioNotifications"
-                                type="checkbox"
-                                checked={ UserSettingsStore.getEnableAudioNotifications() }
-                                onChange={ (e) => {
-                                    UserSettingsStore.setEnableAudioNotifications(e.target.checked);
-                                    this.forceUpdate();
-                                }} />
-                        </div>
-                        <div className="mx_UserNotifSettings_labelCell">
-                            <label htmlFor="enableDesktopAudioNotifications">
-                                Enable audible notifications in web client
-                            </label>
-                        </div>
-                    </div>
-
-                    { emailNotificationsRow }
-
-                    <div className="mx_UserNotifSettings_pushRulesTableWrapper">
-                        <table className="mx_UserNotifSettings_pushRulesTable">
-                            <thead>
-                                <tr>
-                                    <th width="55%"></th>
-                                    <th width="15%">Off</th>
-                                    <th width="15%">On</th>
-                                    <th width="15%">Noisy</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-
-                                { this.renderNotifRulesTableRows() }
-
-                            </tbody>
-                        </table>
-                    </div>
-
-                    { advancedSettings }
-
-                    { devicesSection }
-
-                </div>
-
-            </div>
-        );
-    }
-});
--- a/src/controllers/atoms/EditableText.js
+++ b/src/controllers/atoms/EditableText.js
@@ -0,0 +1,88 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = {
+    propTypes: {
+        onValueChanged: React.PropTypes.func,
+        initialValue: React.PropTypes.string,
+        label: React.PropTypes.string,
+        placeHolder: React.PropTypes.string,
+    },
+
+    Phases: {
+        Display: "display",
+        Edit: "edit",
+    },
+
+    getDefaultProps: function() {
+        return {
+            onValueChanged: function() {},
+            initialValue: '',
+            label: 'Click to set',
+            placeholder: '',
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            value: this.props.initialValue,
+            phase: this.Phases.Display,
+        }
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({
+            value: nextProps.initialValue
+        });
+    },
+
+    getValue: function() {
+        return this.state.value;
+    },
+
+    setValue: function(val, shouldSubmit, suppressListener) {
+        var self = this;
+        this.setState({
+            value: val,
+            phase: this.Phases.Display,
+        }, function() {
+            if (!suppressListener) {
+                self.onValueChanged(shouldSubmit);
+            }
+        });
+    },
+
+    edit: function() {
+        this.setState({
+            phase: this.Phases.Edit,
+        });
+    },
+
+    cancelEdit: function() {
+        this.setState({
+            phase: this.Phases.Display,
+        });
+        this.onValueChanged(false);
+    },
+
+    onValueChanged: function(shouldSubmit) {
+        this.props.onValueChanged(this.state.value, shouldSubmit);
+    },
+};
--- a/src/controllers/atoms/EnableNotificationsButton.js
+++ b/src/controllers/atoms/EnableNotificationsButton.js
@@ -0,0 +1,58 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+var sdk = require('../../index');
+var dis = require("../../dispatcher");
+
+module.exports = {
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== "notifier_enabled") {
+            return;
+        }
+        this.forceUpdate();
+    },
+
+    enabled: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
+        return Notifier.isEnabled();
+    },
+
+    onClick: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
+        var self = this;
+        if (!Notifier.supportsDesktopNotifications()) {
+            return;
+        }
+        if (!Notifier.isEnabled()) {
+            Notifier.setEnabled(true, function() {
+                self.forceUpdate();
+            });
+        } else {
+            Notifier.setEnabled(false);
+        }
+        this.forceUpdate();
+    },
+};
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MTextBody {
-    white-space: pre-wrap;
-}
+'use strict';

-.mx_MTextBody pre{
-  overflow-y: auto;
-  max-height: 30vh;
-}
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'logout'
+        });
+    },
+};
--- a/src/controllers/atoms/MemberAvatar.js
+++ b/src/controllers/atoms/MemberAvatar.js
@@ -0,0 +1,75 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require('../../MatrixClientPeg');
+
+module.exports = {
+    propTypes: {
+        member: React.PropTypes.object.isRequired,
+        width: React.PropTypes.number,
+        height: React.PropTypes.number,
+        resizeMethod: React.PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            width: 40,
+            height: 40,
+            resizeMethod: 'crop'
+        }
+    },
+
+    defaultAvatarUrl: function(member, width, height, resizeMethod) {
+        if (this.skinnedDefaultAvatarUrl) {
+            return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod);
+        }
+        return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
+    },
+
+    onError: function(ev) {
+        // don't tightloop if the browser can't load a data url
+        if (ev.target.src == this.defaultAvatarUrl(this.props.member)) {
+            return;
+        }
+        this.setState({
+            imageUrl: this.defaultAvatarUrl(this.props.member)
+        });
+    },
+
+    getInitialState: function() {
+        var url = this.props.member.getAvatarUrl(
+            MatrixClientPeg.get().getHomeserverUrl(),
+            this.props.width,
+            this.props.height,
+            this.props.resizeMethod,
+            false
+        );
+        if (!url) {
+            url = this.defaultAvatarUrl(
+                this.props.member,
+                this.props.width,
+                this.props.height,
+                this.props.resizeMethod
+            );
+        }
+        return {
+            imageUrl: url
+        };
+    }
+};
--- a/src/controllers/atoms/RoomAvatar.js
+++ b/src/controllers/atoms/RoomAvatar.js
@@ -0,0 +1,112 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require('../../MatrixClientPeg');
+
+/*
+ * View class should provide:
+ * - getUrlList() returning an array of URLs to try for the room avatar
+     in order of preference from the most preferred at index 0. null entries
+     in the array will be skipped over.
+ */
+module.exports = {
+    getDefaultProps: function() {
+        return {
+            width: 36,
+            height: 36,
+            resizeMethod: 'crop'
+        }
+    },
+
+    getInitialState: function() {
+        this._update();
+        return {
+            imageUrl: this._nextUrl()
+        };
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this._update();
+        this.setState({
+            imageUrl: this._nextUrl()
+        });
+    },
+
+    _update: function() {
+        this.urlList = this.getUrlList();
+        this.urlListIndex = -1;
+    },
+
+    _nextUrl: function() {
+        do {
+            ++this.urlListIndex;
+        } while (
+            this.urlList[this.urlListIndex] === null &&
+            this.urlListIndex < this.urlList.length
+        );
+        if (this.urlListIndex < this.urlList.length) {
+            return this.urlList[this.urlListIndex];
+        } else {
+            return null;
+        }
+    },
+
+    // provided to the view class for convenience
+    roomAvatarUrl: function() {
+        var url = this.props.room.getAvatarUrl(
+            MatrixClientPeg.get().getHomeserverUrl(),
+            this.props.width, this.props.height, this.props.resizeMethod,
+            false
+        );
+        return url;
+    },
+
+    // provided to the view class for convenience
+    getOneToOneAvatar: function() {
+        var userIds = Object.keys(this.props.room.currentState.members);
+
+        if (userIds.length == 2) {
+            var theOtherGuy = null;
+            if (this.props.room.currentState.members[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
+                theOtherGuy = this.props.room.currentState.members[userIds[1]];
+            } else {
+                theOtherGuy = this.props.room.currentState.members[userIds[0]];
+            }
+            return theOtherGuy.getAvatarUrl(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                this.props.width, this.props.height, this.props.resizeMethod,
+                false
+            );
+        } else if (userIds.length == 1) {
+            return this.props.room.currentState.members[userIds[0]].getAvatarUrl(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                this.props.width, this.props.height, this.props.resizeMethod,
+                    false
+            );
+        } else {
+           return null;
+        }
+    },
+
+
+    onError: function(ev) {
+        this.setState({
+            imageUrl: this._nextUrl()
+        });
+    }
+};
--- a/src/controllers/atoms/UserSettingsButton.js
+++ b/src/controllers/atoms/UserSettingsButton.js
@@ -0,0 +1,27 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_user_settings'
+        });
+    },
+};
--- a/src/controllers/atoms/create_room/CreateRoomButton.js
+++ b/src/controllers/atoms/create_room/CreateRoomButton.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,17 +18,18 @@ limitations under the License.

 var React = require('react');

-module.exports = React.createClass({
-    displayName: 'VectorLoginHeader',
-    statics: {
-        replaces: 'LoginHeader',
+module.exports = {
+    propTypes: {
+        onCreateRoom: React.PropTypes.func,
    },

-    render: function() {
-        return (
-            <div className="mx_Login_logo">
-                <img src="img/logo.png" width="195" height="195" alt="Riot"/>
-            </div>
-        );
-    }
-});
+    getDefaultProps: function() {
+        return {
+            onCreateRoom: function() {},
+        };
+    },
+
+    onClick: function() {
+        this.props.onCreateRoom();
+    },
+};
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,18 +17,24 @@ limitations under the License.
 'use strict';

 var React = require('react');
-var DateUtils = require('matrix-react-sdk/lib/DateUtils');

-module.exports = React.createClass({
-    displayName: 'MessageTimestamp',
+var Presets = {
+    PrivateChat: "private_chat",
+    PublicChat: "public_chat",
+    Custom: "custom",
+};

-    render: function() {
-        var date = new Date(this.props.ts);
-        return (
-            <span className="mx_MessageTimestamp">
-                { DateUtils.formatTime(date) }
-            </span>
-        );
+module.exports = {
+    propTypes: {
+        onChange: React.PropTypes.func,
+        preset: React.PropTypes.string
    },
-});

+    Presets: Presets,
+
+    getDefaultProps: function() {
+        return {
+            onChange: function() {},
+        };
+    },
+};
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -0,0 +1,47 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require('react');
+
+module.exports = {
+    propTypes: {
+        // Specifying a homeserver will make magical things happen when you,
+        // e.g. start typing in the room alias box.
+        homeserver: React.PropTypes.string,
+        alias: React.PropTypes.string,
+        onChange: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            onChange: function() {},
+            alias: '',
+        };
+    },
+
+    getAliasLocalpart: function() {
+        var room_alias = this.props.alias;
+
+        if (room_alias && this.props.homeserver) {
+            var suffix = ":" + this.props.homeserver;
+            if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
+                room_alias = room_alias.slice(1, -suffix.length);
+            }
+        }
+
+        return room_alias;
+    },
+};
--- a/src/controllers/atoms/create_room/RoomNameTextbox.js
+++ b/src/controllers/atoms/create_room/RoomNameTextbox.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,17 +18,24 @@ limitations under the License.

 var React = require('react');

-module.exports = React.createClass({
-    displayName: 'Spinner',
+module.exports = {
+    propTypes: {
+        default_name: React.PropTypes.string
+    },

-    render: function() {
-        var w = this.props.w || 32;
-        var h = this.props.h || 32;
-        var imgClass = this.props.imgClassName || "";
-        return (
-            <div className="mx_Spinner">
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
-            </div>
-        );
-    }
-});
+    getDefaultProps: function() {
+        return {
+            default_name: '',
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            room_name: this.props.default_name,
+        }
+    },
+
+    getName: function() {
+        return this.state.room_name;
+    },
+};
--- a/src/controllers/molecules/ChangeAvatar.js
+++ b/src/controllers/molecules/ChangeAvatar.js
@@ -0,0 +1,70 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require('react');
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    propTypes: {
+        initialAvatarUrl: React.PropTypes.string,
+        room: React.PropTypes.object,
+    },
+
+    Phases: {
+        Display: "display",
+        Uploading: "uploading",
+        Error: "error",
+    },
+
+    getInitialState: function() {
+        return {
+            avatarUrl: this.props.initialAvatarUrl,
+            phase: this.Phases.Display,
+        }
+    },
+
+    setAvatarFromFile: function(file) {
+        var newUrl = null;
+
+        this.setState({
+            phase: this.Phases.Uploading
+        });
+        var self = this;
+        MatrixClientPeg.get().uploadContent(file).then(function(url) {
+            newUrl = url;
+            if (self.props.room) {
+                return MatrixClientPeg.get().sendStateEvent(
+                    self.props.room.roomId,
+                    'm.room.avatar',
+                    {url: url},
+                    ''
+                );
+            } else {
+                return MatrixClientPeg.get().setAvatarUrl(url);
+            }
+        }).done(function() {
+            self.setState({
+                phase: self.Phases.Display,
+                avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
+            });
+        }, function(error) {
+            self.setState({
+                phase: self.Phases.Error
+            });
+            self.onError(error);
+        });
+    },
+}
--- a/src/controllers/molecules/ChangeDisplayName.js
+++ b/src/controllers/molecules/ChangeDisplayName.js
@@ -0,0 +1,71 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    getDefaultProps: function() {
+        return {
+            onFinished: function() {},
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+            errorString: null
+        }
+    },
+
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        this.setState({busy: true});
+        var self = this;
+        cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+            self.setState({
+                displayName: result.displayname,
+                busy: false
+            });
+        }, function(error) {
+            self.setState({
+                errorString: "Failed to fetch display name",
+                busy: false
+            });
+        });
+    },
+
+    changeDisplayname: function(new_displayname) {
+        this.setState({
+            busy: true,
+            errorString: null,
+        })
+
+        var self = this;
+        MatrixClientPeg.get().setDisplayName(new_displayname).then(function() {
+            self.setState({
+                busy: false,
+                displayName: new_displayname
+            });
+        }, function(error) {
+            self.setState({
+                busy: false,
+                errorString: "Failed to set display name"
+            });
+        });
+    },
+}
--- a/src/controllers/molecules/ChangePassword.js
+++ b/src/controllers/molecules/ChangePassword.js
@@ -0,0 +1,76 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    propTypes: {
+        onFinished: React.PropTypes.func,
+    },
+
+    Phases: {
+        Edit: "edit",
+        Uploading: "uploading",
+        Error: "error",
+        Success: "Success"
+    },
+
+    getDefaultProps: function() {
+        return {
+            onFinished: function() {},
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            phase: this.Phases.Edit,
+            errorString: ''
+        }
+    },
+
+    changePassword: function(old_password, new_password) {
+        var cli = MatrixClientPeg.get();
+
+        var authDict = {
+            type: 'm.login.password',
+            user: cli.credentials.userId,
+            password: old_password
+        };
+
+        this.setState({
+            phase: this.Phases.Uploading,
+            errorString: '',
+        })
+
+        var d = cli.setPassword(authDict, new_password);
+
+        var self = this;
+        d.then(function() {
+            self.setState({
+                phase: self.Phases.Success,
+                errorString: '',
+            })
+        }, function(err) {
+            self.setState({
+                phase: self.Phases.Error,
+                errorString: err.toString()
+            })
+        });
+    },
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,18 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_ServerConfig {
-    margin-top: 7px;
-}
+'use strict';

-.mx_ServerConfig .mx_Login_field {
-    margin-top: 4px;
-    margin-bottom: 5px;
-}
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    shouldHighlight: function() {
+        var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
+        if (!actions || !actions.tweaks) { return false; }
+        return actions.tweaks.highlight;
+    }
+};

-.mx_ServerConfig_help:link {
-    opacity: 0.8;
-    font-size: 13px;
-    font-weight: 300;
-    color: #4a4a4a;
-}
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_BaseAvatar {
-    position: relative;
-}
+'use strict';

-.mx_BaseAvatar_initial {
-    position: absolute;
-    z-index: 1;
-    color: #fff;
-    text-align: center;
-    speak: none;
-    pointer-events: none;
-    font-weight: normal;
-}
+var linkify = require('linkifyjs');
+var linkifyElement = require('linkifyjs/element');
+var linkifyMatrix = require('../../linkify-matrix');
+
+linkifyMatrix(linkify);
+
+module.exports = {
+    componentDidMount: function() {
+        linkifyElement(this.refs.content.getDOMNode(), linkifyMatrix.options);
+    }
+};

-.mx_BaseAvatar_image {
-    border-radius: 40px;
-    vertical-align: top;
-}
--- a/src/controllers/molecules/MFileTile.js
+++ b/src/controllers/molecules/MFileTile.js
@@ -0,0 +1,44 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var filesize = require('filesize');
+
+module.exports = {
+    presentableTextForFile: function(content) {
+        var linkText = 'Attachment';
+        if (content.body && content.body.length > 0) {
+            linkText = content.body;
+        }
+
+        var additionals = [];
+        if (content.info) {
+            // if (content.info.mimetype && content.info.mimetype.length > 0) {
+            //    additionals.push(content.info.mimetype);
+            // }
+            if (content.info.size) {
+                additionals.push(filesize(content.info.size));
+            }
+        }
+
+        if (additionals.length > 0) {
+            linkText += ' (' + additionals.join(', ') + ')';
+        }
+        return linkText;
+    }
+};
+
--- a/src/controllers/molecules/MNoticeTile.js
+++ b/src/controllers/molecules/MNoticeTile.js
@@ -0,0 +1,28 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var linkify = require('linkifyjs');
+var linkifyElement = require('linkifyjs/element');
+var linkifyMatrix = require('../../linkify-matrix.js');
+linkifyMatrix(linkify);
+
+module.exports = {
+    componentDidMount: function() {
+        linkifyElement(this.refs.content.getDOMNode(), linkifyMatrix.options);
+    }
+};
--- a/src/controllers/molecules/MTextTile.js
+++ b/src/controllers/molecules/MTextTile.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var linkify = require('linkifyjs');
+var linkifyElement = require('linkifyjs/element');
+var linkifyMatrix = require('../../linkify-matrix');
+
+linkifyMatrix(linkify);
+
+module.exports = {
+    componentDidMount: function() {
+        linkifyElement(this.refs.content.getDOMNode(), linkifyMatrix.options);
+    }
+};
+
--- a/src/controllers/molecules/MemberInfo.js
+++ b/src/controllers/molecules/MemberInfo.js
@@ -0,0 +1,324 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ * State vars:
+ * 'can': {
+ *   kick: boolean,
+ *   ban: boolean,
+ *   mute: boolean,
+ *   modifyLevel: boolean
+ * },
+ * 'muted': boolean,
+ * 'isTargetMod': boolean
+ */
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var dis = require("../../dispatcher");
+var Modal = require("../../Modal");
+var sdk = require('../../index');
+var Loader = require("react-loader");
+
+module.exports = {
+    componentDidMount: function() {
+        // work out the current state
+        if (this.props.member) {
+            var memberState = this._calculateOpsPermissions();
+            this.setState(memberState);
+        }
+    },
+
+    onKick: function() {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var roomId = this.props.member.roomId;
+        var target = this.props.member.userId;
+        MatrixClientPeg.get().kick(roomId, target).done(function() {
+            // NO-OP; rely on the m.room.member event coming down else we could
+            // get out of sync if we force setState here!
+            console.log("Kick success");
+        }, function(err) {
+            Modal.createDialog(ErrorDialog, {
+                title: "Kick error",
+                description: err.message
+            });
+        });
+        this.props.onFinished();
+    },
+
+    onBan: function() {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var roomId = this.props.member.roomId;
+        var target = this.props.member.userId;
+        MatrixClientPeg.get().ban(roomId, target).done(function() {
+            // NO-OP; rely on the m.room.member event coming down else we could
+            // get out of sync if we force setState here!
+            console.log("Ban success");
+        }, function(err) {
+            Modal.createDialog(ErrorDialog, {
+                title: "Ban error",
+                description: err.message
+            });
+        });
+        this.props.onFinished();
+    },
+
+    onMuteToggle: function() {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var roomId = this.props.member.roomId;
+        var target = this.props.member.userId;
+        var room = MatrixClientPeg.get().getRoom(roomId);
+        if (!room) {
+            this.props.onFinished();
+            return;
+        }
+        var powerLevelEvent = room.currentState.getStateEvents(
+            "m.room.power_levels", ""
+        );
+        if (!powerLevelEvent) {
+            this.props.onFinished();
+            return;
+        }
+        var isMuted = this.state.muted;
+        var powerLevels = powerLevelEvent.getContent();
+        var levelToSend = (
+            (powerLevels.events ? powerLevels.events["m.room.message"] : null) ||
+            powerLevels.events_default
+        );
+        var level;
+        if (isMuted) { // unmute
+            level = levelToSend;
+        }
+        else { // mute
+            level = levelToSend - 1;
+        }
+
+        MatrixClientPeg.get().setPowerLevel(roomId, target, level, powerLevelEvent).done(
+        function() {
+            // NO-OP; rely on the m.room.member event coming down else we could
+            // get out of sync if we force setState here!
+            console.log("Mute toggle success");
+        }, function(err) {
+            Modal.createDialog(ErrorDialog, {
+                title: "Mute error",
+                description: err.message
+            });
+        });
+        this.props.onFinished();        
+    },
+
+    onModToggle: function() {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var roomId = this.props.member.roomId;
+        var target = this.props.member.userId;
+        var room = MatrixClientPeg.get().getRoom(roomId);
+        if (!room) {
+            this.props.onFinished();
+            return;
+        }
+        var powerLevelEvent = room.currentState.getStateEvents(
+            "m.room.power_levels", ""
+        );
+        if (!powerLevelEvent) {
+            this.props.onFinished();
+            return;
+        }
+        var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+        if (!me) {
+            this.props.onFinished();
+            return;
+        }
+        var defaultLevel = powerLevelEvent.getContent().users_default;
+        var modLevel = me.powerLevel - 1;
+        // toggle the level
+        var newLevel = this.state.isTargetMod ? defaultLevel : modLevel;
+        MatrixClientPeg.get().setPowerLevel(roomId, target, newLevel, powerLevelEvent).done(
+        function() {
+            // NO-OP; rely on the m.room.member event coming down else we could
+            // get out of sync if we force setState here!
+            console.log("Mod toggle success");
+        }, function(err) {
+            Modal.createDialog(ErrorDialog, {
+                title: "Mod error",
+                description: err.message
+            });
+        });
+        this.props.onFinished();        
+    },
+
+    onChatClick: function() {
+        // check if there are any existing rooms with just us and them (1:1)
+        // If so, just view that room. If not, create a private room with them.
+        var self = this;
+        var rooms = MatrixClientPeg.get().getRooms();
+        var userIds = [
+            this.props.member.userId,
+            MatrixClientPeg.get().credentials.userId
+        ];
+        var existingRoomId = null;
+        for (var i = 0; i < rooms.length; i++) {
+            var members = rooms[i].getJoinedMembers();
+            if (members.length === 2) {
+                var hasTargetUsers = true;
+                for (var j = 0; j < members.length; j++) {
+                    if (userIds.indexOf(members[j].userId) === -1) {
+                        hasTargetUsers = false;
+                        break;
+                    }
+                }
+                if (hasTargetUsers) {
+                    existingRoomId = rooms[i].roomId;
+                    break;
+                }
+            }
+        }
+
+        if (existingRoomId) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: existingRoomId
+            });
+            this.props.onFinished();
+        }
+        else {
+            self.setState({ creatingRoom: true });
+            MatrixClientPeg.get().createRoom({
+                invite: [this.props.member.userId],
+                preset: "private_chat"
+            }).done(function(res) {
+                self.setState({ creatingRoom: false });
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: res.room_id
+                });
+                self.props.onFinished();
+            }, function(err) {
+                self.setState({ creatingRoom: false });
+                console.error(
+                    "Failed to create room: %s", JSON.stringify(err)
+                );
+                self.props.onFinished();
+            });
+        }
+    },
+
+    // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
+    // Not sure what the right solution to this is.
+    onLeaveClick: function() {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+
+        var roomId = this.props.member.roomId;
+        Modal.createDialog(QuestionDialog, {
+            title: "Leave room",
+            description: "Are you sure you want to leave the room?",
+            onFinished: function(should_leave) {
+                if (should_leave) {
+                    var d = MatrixClientPeg.get().leave(roomId);
+
+                    var modal = Modal.createDialog(Loader);
+
+                    d.then(function() {
+                        modal.close();
+                        dis.dispatch({action: 'view_next_room'});
+                    }, function(err) {
+                        modal.close();
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to leave room",
+                            description: err.toString()
+                        });
+                    });
+                }
+            }
+        });
+        this.props.onFinished();        
+    },
+
+    getInitialState: function() {
+        return {
+            can: {
+                kick: false,
+                ban: false,
+                mute: false,
+                modifyLevel: false
+            },
+            muted: false,
+            isTargetMod: false,
+            creatingRoom: false
+        }
+    },
+
+    _calculateOpsPermissions: function() {
+        var defaultPerms = {
+            can: {},
+            muted: false,
+            modifyLevel: false
+        };
+        var room = MatrixClientPeg.get().getRoom(this.props.member.roomId);
+        if (!room) {
+            return defaultPerms;
+        }
+        var powerLevels = room.currentState.getStateEvents(
+            "m.room.power_levels", ""
+        );
+        if (!powerLevels) {
+            return defaultPerms;
+        }
+        var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+        var them = this.props.member;
+        return {
+            can: this._calculateCanPermissions(
+                me, them, powerLevels.getContent()
+            ),
+            muted: this._isMuted(them, powerLevels.getContent()),
+            isTargetMod: them.powerLevel > powerLevels.getContent().users_default
+        };
+    },
+
+    _calculateCanPermissions: function(me, them, powerLevels) {
+        var can = {
+            kick: false,
+            ban: false,
+            mute: false,
+            modifyLevel: false
+        };
+        var canAffectUser = them.powerLevel < me.powerLevel;
+        if (!canAffectUser) {
+            //console.log("Cannot affect user: %s >= %s", them.powerLevel, me.powerLevel);
+            return can;
+        }
+        var editPowerLevel = (
+            (powerLevels.events ? powerLevels.events["m.room.power_levels"] : null) ||
+            powerLevels.state_default
+        );
+        can.kick = me.powerLevel >= powerLevels.kick;
+        can.ban = me.powerLevel >= powerLevels.ban;
+        can.mute = me.powerLevel >= editPowerLevel;
+        can.modifyLevel = me.powerLevel > them.powerLevel;
+        return can;
+    },
+
+    _isMuted: function(member, powerLevelContent) {
+        if (!powerLevelContent || !member) {
+            return false;
+        }
+        var levelToSend = (
+            (powerLevelContent.events ? powerLevelContent.events["m.room.message"] : null) ||
+            powerLevelContent.events_default
+        );
+        return member.powerLevel < levelToSend;
+    }
+};
+
--- a/src/controllers/molecules/MemberTile.js
+++ b/src/controllers/molecules/MemberTile.js
@@ -0,0 +1,58 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var dis = require("../../dispatcher");
+var Modal = require("../../Modal");
+var sdk = require('../../index.js');
+var Loader = require("react-loader");
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    getInitialState: function() {
+        return {};
+    },
+
+    onLeaveClick: function() {
+        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+
+        var roomId = this.props.member.roomId;
+        Modal.createDialog(QuestionDialog, {
+            title: "Leave room",
+            description: "Are you sure you want to leave the room?",
+            onFinished: function(should_leave) {
+                if (should_leave) {
+                    var d = MatrixClientPeg.get().leave(roomId);
+
+                    var modal = Modal.createDialog(Loader);
+
+                    d.then(function() {
+                        modal.close();
+                        dis.dispatch({action: 'view_next_room'});
+                    }, function(err) {
+                        modal.close();
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to leave room",
+                            description: err.toString()
+                        });
+                    });
+                }
+            }
+        });
+    }
+};
--- a/src/controllers/molecules/MessageComposer.js
+++ b/src/controllers/molecules/MessageComposer.js
@@ -0,0 +1,413 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var SlashCommands = require("../../SlashCommands");
+var Modal = require("../../Modal");
+var sdk = require('../../index');
+
+var dis = require("../../dispatcher");
+var KeyCode = {
+    ENTER: 13,
+    TAB: 9,
+    SHIFT: 16,
+    UP: 38,
+    DOWN: 40
+};
+
+var TYPING_USER_TIMEOUT = 10000;
+var TYPING_SERVER_TIMEOUT = 30000;
+
+module.exports = {
+    componentWillMount: function() {
+        this.tabStruct = {
+            completing: false,
+            original: null,
+            index: 0
+        };
+        this.sentHistory = {
+            // The list of typed messages. Index 0 is more recent
+            data: [],
+            // The position in data currently displayed
+            position: -1,
+            // The room the history is for.
+            roomId: null,
+            // The original text before they hit UP
+            originalText: null,
+            // The textarea element to set text to.
+            element: null,
+
+            init: function(element, roomId) {
+                this.roomId = roomId;
+                this.element = element;
+                this.position = -1;
+                var storedData = window.sessionStorage.getItem(
+                    "history_" + roomId
+                );
+                if (storedData) {
+                    this.data = JSON.parse(storedData);
+                }
+                if (this.roomId) {
+                    this.setLastTextEntry();
+                }
+            },
+
+            push: function(text) {
+                // store a message in the sent history
+                this.data.unshift(text);
+                window.sessionStorage.setItem(
+                    "history_" + this.roomId,
+                    JSON.stringify(this.data)
+                );
+                // reset history position
+                this.position = -1;
+                this.originalText = null;
+            },
+
+            // move in the history. Returns true if we managed to move.
+            next: function(offset) {
+                if (this.position === -1) {
+                    // user is going into the history, save the current line.
+                    this.originalText = this.element.value;
+                }
+                else {
+                    // user may have modified this line in the history; remember it.
+                    this.data[this.position] = this.element.value;
+                }
+
+                if (offset > 0 && this.position === (this.data.length - 1)) {
+                    // we've run out of history
+                    return false;
+                }
+
+                // retrieve the next item (bounded).
+                var newPosition = this.position + offset;
+                newPosition = Math.max(-1, newPosition);
+                newPosition = Math.min(newPosition, this.data.length - 1);
+                this.position = newPosition;
+
+                if (this.position !== -1) {
+                    // show the message
+                    this.element.value = this.data[this.position];
+                }
+                else if (this.originalText !== undefined) {
+                    // restore the original text the user was typing.
+                    this.element.value = this.originalText;
+                }
+                return true;
+            },
+
+            saveLastTextEntry: function() {
+                // save the currently entered text in order to restore it later.
+                // NB: This isn't 'originalText' because we want to restore
+                // sent history items too!
+                var text = this.element.value;
+                window.sessionStorage.setItem("input_" + this.roomId, text);
+            },
+
+            setLastTextEntry: function() {
+                var text = window.sessionStorage.getItem("input_" + this.roomId);
+                if (text) {
+                    this.element.value = text;
+                }
+            }
+        };
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        this.sentHistory.init(
+            this.refs.textarea.getDOMNode(),
+            this.props.room.roomId
+        );
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        this.sentHistory.saveLastTextEntry();
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'focus_composer':
+                this.refs.textarea.getDOMNode().focus();
+                break;
+        }
+    },
+
+    onKeyDown: function (ev) {
+        if (ev.keyCode === KeyCode.ENTER) {
+            var input = this.refs.textarea.getDOMNode().value;
+            if (input.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            this.sentHistory.push(input);
+            this.onEnter(ev);
+        }
+        else if (ev.keyCode === KeyCode.TAB) {
+            var members = [];
+            if (this.props.room) {
+                members = this.props.room.getJoinedMembers();
+            }
+            this.onTab(ev, members);
+        }
+        else if (ev.keyCode === KeyCode.UP || ev.keyCode === KeyCode.DOWN) {
+            this.sentHistory.next(
+                ev.keyCode === KeyCode.UP ? 1 : -1
+            );
+            ev.preventDefault();
+        }
+        else if (ev.keyCode !== KeyCode.SHIFT && this.tabStruct.completing) {
+            // they're resuming typing; reset tab complete state vars.
+            this.tabStruct.completing = false;
+            this.tabStruct.index = 0;
+        }
+
+        var self = this;
+        setTimeout(function() {
+            if (self.refs.textarea && self.refs.textarea.getDOMNode().value != '') {
+                self.onTypingActivity();
+            } else {
+                self.onFinishedTyping();
+            }
+        }, 10); // XXX: what is this 10ms setTimeout doing?  Looks hacky :(
+    },
+
+    onEnter: function(ev) {
+        var contentText = this.refs.textarea.getDOMNode().value;
+
+        var cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
+        if (cmd) {
+            ev.preventDefault();
+            if (!cmd.error) {
+                this.refs.textarea.getDOMNode().value = '';
+            }
+            if (cmd.promise) {
+                cmd.promise.done(function() {
+                    console.log("Command success.");
+                }, function(err) {
+                    console.error("Command failure: %s", err);
+                    var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Server error",
+                        description: err.message
+                    });
+                });
+            }
+            else if (cmd.error) {
+                console.error(cmd.error);
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Command error",
+                    description: cmd.error
+                });
+            }
+            return;
+        }
+
+        var content = null;
+        if (/^\/me /i.test(contentText)) {
+            content = {
+                msgtype: 'm.emote',
+                body: contentText.substring(4)
+            };
+        } else {
+            content = {
+                msgtype: 'm.text',
+                body: contentText
+            };
+        }
+
+        MatrixClientPeg.get().sendMessage(this.props.room.roomId, content).then(function() {
+            dis.dispatch({
+                action: 'message_sent'
+            });
+        }, function() {
+            dis.dispatch({
+                action: 'message_send_failed'
+            });
+        });
+        this.refs.textarea.getDOMNode().value = '';
+        ev.preventDefault();
+    },
+
+    onTab: function(ev, sortedMembers) {
+        var textArea = this.refs.textarea.getDOMNode();
+        if (!this.tabStruct.completing) {
+            this.tabStruct.completing = true;
+            this.tabStruct.index = 0;
+            // cache starting text
+            this.tabStruct.original = textArea.value;
+        }
+
+        // loop in the right direction
+        if (ev.shiftKey) {
+            this.tabStruct.index --;
+            if (this.tabStruct.index < 0) {
+                // wrap to the last search match, and fix up to a real index
+                // value after we've matched.
+                this.tabStruct.index = Number.MAX_VALUE;
+            }
+        }
+        else {
+            this.tabStruct.index++;
+        }
+
+        var searchIndex = 0;
+        var targetIndex = this.tabStruct.index;
+        var text = this.tabStruct.original;
+
+        var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
+        // console.log("Searched in '%s' - got %s", text, search);
+        if (targetIndex === 0) { // 0 is always the original text
+            textArea.value = text;
+        }
+        else if (search && search[1]) {
+            // console.log("search found: " + search+" from "+text);
+            var expansion;
+
+            // FIXME: could do better than linear search here
+            for (var i=0; i<sortedMembers.length; i++) {
+                var member = sortedMembers[i];
+                if (member.name && searchIndex < targetIndex) {
+                    if (member.name.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
+                        expansion = member.name;
+                        searchIndex++;
+                    }
+                }
+            }
+
+            if (searchIndex < targetIndex) { // then search raw mxids
+                for (var i=0; i<sortedMembers.length; i++) {
+                    if (searchIndex >= targetIndex) {
+                        break;
+                    }
+                    var userId = sortedMembers[i].userId;
+                    // === 1 because mxids are @username
+                    if (userId.toLowerCase().indexOf(search[1].toLowerCase()) === 1) {
+                        expansion = userId;
+                        searchIndex++;
+                    }
+                }
+            }
+
+            if (searchIndex === targetIndex ||
+                    targetIndex === Number.MAX_VALUE) {
+                // xchat-style tab complete, add a colon if tab
+                // completing at the start of the text
+                if (search[0].length === text.length) {
+                    expansion += ": ";
+                }
+                else {
+                    expansion += " ";
+                }
+                textArea.value = text.replace(
+                    /@?([a-zA-Z0-9_\-:\.]+)$/, expansion
+                );
+                // cancel blink
+                textArea.style["background-color"] = "";
+                if (targetIndex === Number.MAX_VALUE) {
+                    // wrap the index around to the last index found
+                    this.tabStruct.index = searchIndex;
+                    targetIndex = searchIndex;
+                }
+            }
+            else {
+                // console.log("wrapped!");
+                textArea.style["background-color"] = "#faa";
+                setTimeout(function() {
+                     textArea.style["background-color"] = "";
+                }, 150);
+                textArea.value = text;
+                this.tabStruct.index = 0;
+            }
+        }
+        else {
+            this.tabStruct.index = 0;
+        }
+        // prevent the default TAB operation (typically focus shifting)
+        ev.preventDefault();
+    },
+
+    onTypingActivity: function() {
+        this.isTyping = true;
+        if (!this.userTypingTimer) {
+            this.sendTyping(true);
+        }
+        this.startUserTypingTimer();
+        this.startServerTypingTimer();
+    },
+
+    onFinishedTyping: function() {
+        this.isTyping = false;
+        this.sendTyping(false);
+        this.stopUserTypingTimer();
+        this.stopServerTypingTimer();
+    },
+
+    startUserTypingTimer: function() {
+        this.stopUserTypingTimer();
+        var self = this;
+        this.userTypingTimer = setTimeout(function() {
+            self.isTyping = false;
+            self.sendTyping(self.isTyping);
+            self.userTypingTimer = null;
+        }, TYPING_USER_TIMEOUT);
+    },
+
+    stopUserTypingTimer: function() {
+        if (this.userTypingTimer) {
+            clearTimeout(this.userTypingTimer);
+            this.userTypingTimer = null;
+        }
+    },
+
+    startServerTypingTimer: function() {
+        if (!this.serverTypingTimer) {
+            var self = this;
+            this.serverTypingTimer = setTimeout(function() {
+                if (self.isTyping) {
+                    self.sendTyping(self.isTyping);
+                    self.startServerTypingTimer();
+                }
+            }, TYPING_SERVER_TIMEOUT / 2);
+        }
+    },
+
+    stopServerTypingTimer: function() {
+        if (this.serverTypingTimer) {
+            clearTimeout(this.servrTypingTimer);
+            this.serverTypingTimer = null;
+        }
+    },
+
+    sendTyping: function(isTyping) {
+        MatrixClientPeg.get().sendTyping(
+            this.props.room.roomId,
+            this.isTyping, TYPING_SERVER_TIMEOUT
+        ).done();
+    },
+
+    refreshTyping: function() {
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+            this.typingTimeout = null;
+        }
+
+    }
+};
+
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MNoticeBody {
-    white-space: pre-wrap;
-    opacity: 0.6;
-}
+'use strict';
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+};
+
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_ProgressBar {
-    height: 5px;
-    border: 1px solid black;
-}
+'use strict';

-.mx_ProgressBar_fill {
-    height: 100%;
-    background-color: #000;
-}
+var React = require('react');
+
+module.exports = {
+    propTypes: {
+        value: React.PropTypes.number,
+        max: React.PropTypes.number
+    },
+};
--- a/src/controllers/molecules/RoomHeader.js
+++ b/src/controllers/molecules/RoomHeader.js
@@ -0,0 +1,118 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+/*
+ * State vars:
+ * this.state.call_state = the UI state of the call (see CallHandler)
+ */
+
+var React = require('react');
+var dis = require("../../dispatcher");
+var CallHandler = require("../../CallHandler");
+
+module.exports = {
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        editing: React.PropTypes.bool,
+        onSettingsClick: React.PropTypes.func,
+        onSaveClick: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            editing: false,
+            onSettingsClick: function() {},
+            onSaveClick: function() {},
+        };
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        if (this.props.room) {
+            var call = CallHandler.getCallForRoom(this.props.room.roomId);
+            var callState = call ? call.call_state : "ended";
+            this.setState({
+                call_state: callState
+            });
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        // don't filter out payloads for room IDs other than props.room because
+        // we may be interested in the conf 1:1 room
+        if (payload.action !== 'call_state' || !payload.room_id) {
+            return;
+        }
+        var call = CallHandler.getCallForRoom(payload.room_id);
+        var callState = call ? call.call_state : "ended";
+        this.setState({
+            call_state: callState
+        });
+    },
+
+    onVideoClick: function(e) {
+        dis.dispatch({
+            action: 'place_call',
+            type: e.shiftKey ? "screensharing" : "video",
+            room_id: this.props.room.roomId
+        });
+    },
+    onVoiceClick: function() {
+        dis.dispatch({
+            action: 'place_call',
+            type: "voice",
+            room_id: this.props.room.roomId
+        });
+    },
+    onHangupClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        if (!call) { return; }
+        dis.dispatch({
+            action: 'hangup',
+            // hangup the call for this room, which may not be the room in props
+            // (e.g. conferences which will hangup the 1:1 room instead)
+            room_id: call.roomId
+        });
+    },
+    onMuteAudioClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        if (!call) {
+            return;
+        }
+        var newState = !call.isMicrophoneMuted();
+        call.setMicrophoneMuted(newState);
+        this.setState({
+            audioMuted: newState
+        });
+    },
+    onMuteVideoClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        if (!call) {
+            return;
+        }
+        var newState = !call.isLocalVideoMuted();
+        call.setLocalVideoMuted(newState);
+        this.setState({
+            videoMuted: newState
+        });
+    }
+};
--- a/src/controllers/molecules/RoomSettings.js
+++ b/src/controllers/molecules/RoomSettings.js
@@ -0,0 +1,29 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require('react');
+
+module.exports = {
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            power_levels_changed: false
+        };
+    }
+};
--- a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MessageContextMenu_field {
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-    white-space: nowrap;
-}
+'use strict';

-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
-    font-weight: bold;
-}
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.props.room.roomId
+        });
+    },
+};
--- a/src/controllers/molecules/ServerConfig.js
+++ b/src/controllers/molecules/ServerConfig.js
@@ -0,0 +1,64 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+
+module.exports = {
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        default_hs_url: React.PropTypes.string,
+        default_is_url: React.PropTypes.string
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            defaultHsUrl: 'https://matrix.org/',
+            defaultIsUrl: 'https://matrix.org/'
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.defaultHsUrl,
+            is_url: this.props.defaultIsUrl,
+        }
+    },
+
+    hsChanged: function(ev) {
+        this.setState({hs_url: ev.target.value}, function() {
+            this.props.onHsUrlChanged(this.state.hs_url);
+        });
+    },
+
+    isChanged: function(ev) {
+        this.setState({is_url: ev.target.value}, function() {
+            this.props.onIsUrlChanged(this.state.is_url);
+        });
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
+    },
+};
--- a/src/controllers/molecules/UserSelector.js
+++ b/src/controllers/molecules/UserSelector.js
@@ -0,0 +1,45 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = {
+    propTypes: {
+        onChange: React.PropTypes.func,
+        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
+    },
+
+    getDefaultProps: function() {
+        return {
+            onChange: function() {},
+            selected: [],
+        };
+    },
+
+    addUser: function(user_id) {
+        if (this.props.selected_users.indexOf(user_id == -1)) {
+            this.props.onChange(this.props.selected_users.concat([user_id]));
+        }
+    },
+
+    removeUser: function(user_id) {
+        this.props.onChange(this.props.selected_users.filter(function(e) {
+            return e != user_id;
+        }));
+    },
+};
--- a/src/controllers/molecules/voip/CallView.js
+++ b/src/controllers/molecules/voip/CallView.js
@@ -0,0 +1,72 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var dis = require("../../../dispatcher");
+var CallHandler = require("../../../CallHandler");
+
+/*
+ * State vars:
+ * this.state.call = MatrixCall|null
+ *
+ * Props:
+ * this.props.room = Room (JS SDK)
+ */
+
+module.exports = {
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        if (this.props.room) {
+            this.showCall(this.props.room.roomId);
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        // if we were given a room_id to track, don't handle anything else.
+        if (payload.room_id && this.props.room && 
+                this.props.room.roomId !== payload.room_id) {
+            return;
+        }
+        if (payload.action !== 'call_state') {
+            return;
+        }
+        this.showCall(payload.room_id);
+    },
+
+    showCall: function(roomId) {
+        var call = CallHandler.getCall(roomId);
+        if (call) {
+            call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
+            call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
+            // give a separate element for audio stream playback - both for voice calls
+            // and for the voice stream of screen captures
+            call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
+        }
+        if (call && call.type === "video" && call.state !== 'ended') {
+            this.getVideoView().getLocalVideoElement().style.display = "initial";
+            this.getVideoView().getRemoteVideoElement().style.display = "initial";
+        }
+        else {
+            this.getVideoView().getLocalVideoElement().style.display = "none";
+            this.getVideoView().getRemoteVideoElement().style.display = "none";
+        }
+    }
+};
+
--- a/src/controllers/molecules/voip/IncomingCallBox.js
+++ b/src/controllers/molecules/voip/IncomingCallBox.js
@@ -0,0 +1,73 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var dis = require("../../../dispatcher");
+var CallHandler = require("../../../CallHandler");
+
+module.exports = {
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    getInitialState: function() {
+        return {
+            incomingCall: null
+        }
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== 'call_state') {
+            return;
+        }
+        var call = CallHandler.getCall(payload.room_id);
+        if (!call || call.call_state !== 'ringing') {
+            this.setState({
+                incomingCall: null,
+            });
+            this.getRingAudio().pause();
+            return;
+        }
+        if (call.call_state === "ringing") {
+            this.getRingAudio().load();
+            this.getRingAudio().play();
+        }
+        else {
+            this.getRingAudio().pause();
+        }
+
+        this.setState({
+            incomingCall: call
+        });
+    },
+
+    onAnswerClick: function() {
+        dis.dispatch({
+            action: 'answer',
+            room_id: this.state.incomingCall.roomId
+        });
+    },
+    onRejectClick: function() {
+        dis.dispatch({
+            action: 'hangup',
+            room_id: this.state.incomingCall.roomId
+        });
+    }
+};
+
--- a/src/controllers/organisms/CasLogin.js
+++ b/src/controllers/organisms/CasLogin.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Cas = require("../../CasLogic");
+
+module.exports = {
+
+    onCasClicked: function(ev) {
+        var serviceRedirectUrl = Cas.getServiceUrl() + "#/login/cas";
+        var self = this;
+        MatrixClientPeg.get().getCasServer().done(function(data) {
+            var serverUrl = data.serverUrl + "/login?service=" + encodeURIComponent(serviceRedirectUrl);
+            window.location.href = serverUrl;
+        }, function(error) {
+            self.setStep("stage_m.login.cas");
+            self.setState({errorText: 'Login failed.'});
+        });
+    },
+
+};
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -0,0 +1,135 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var PresetValues = require('../atoms/create_room/Presets').Presets;
+var q = require('q');
+var encryption = require("../../encryption");
+
+module.exports = {
+    propTypes: {
+        onRoomCreated: React.PropTypes.func,
+    },
+
+    phases: {
+        CONFIG: "CONFIG",  // We're waiting for user to configure and hit create.
+        CREATING: "CREATING",  // We're sending the request.
+        CREATED: "CREATED",  // We successfully created the room.
+        ERROR: "ERROR",  // There was an error while trying to create room.
+    },
+
+    getDefaultProps: function() {
+        return {
+            onRoomCreated: function() {},
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            phase: this.phases.CONFIG,
+            error_string: "",
+            is_private: true,
+            share_history: false,
+            default_preset: PresetValues.PrivateChat,
+            topic: '',
+            room_name: '',
+            invited_users: [],
+        };
+    },
+
+    onCreateRoom: function() {
+        var options = {};
+
+        if (this.state.room_name) {
+            options.name = this.state.room_name;
+        }
+
+        if (this.state.topic) {
+            options.topic = this.state.topic;
+        }
+
+        if (this.state.preset) {
+            if (this.state.preset != PresetValues.Custom) {
+                options.preset = this.state.preset;
+            } else {
+                options.initial_state = [
+                    {
+                        type: "m.room.join_rules",
+                        content: {
+                            "join_rules": this.state.is_private ? "invite" : "public"
+                        }
+                    },
+                    {
+                        type: "m.room.history_visibility",
+                        content: {
+                            "history_visibility": this.state.share_history ? "shared" : "invited"
+                        }
+                    },
+                ];
+            }
+        }
+
+        options.invite = this.state.invited_users;
+
+        var alias = this.getAliasLocalpart();
+        if (alias) {
+            options.room_alias_name = alias;
+        }
+
+        var cli = MatrixClientPeg.get();
+        if (!cli) {
+            // TODO: Error.
+            console.error("Cannot create room: No matrix client.");
+            return;
+        }
+
+        var deferred = cli.createRoom(options);
+
+        var response;
+
+        if (this.state.encrypt) {
+            deferred = deferred.then(function(res) {
+                response = res;
+                return encryption.enableEncryption(
+                    cli, response.roomId, options.invite
+                );
+            }).then(function() {
+                return q(response) }
+            );
+        }
+
+        this.setState({
+            phase: this.phases.CREATING,
+        });
+
+        var self = this;
+
+        deferred.then(function (resp) {
+            self.setState({
+                phase: self.phases.CREATED,
+            });
+            self.props.onRoomCreated(resp.room_id);
+        }, function(err) {
+            self.setState({
+                phase: self.phases.ERROR,
+                error_string: err.toString(),
+            });
+        });
+    }
+};
--- a/src/controllers/organisms/ErrorDialog.js
+++ b/src/controllers/organisms/ErrorDialog.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+
+module.exports = {
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "Error",
+            description: "An error has occurred.",
+            button: "OK",
+            focus: true,
+        };
+    },
+};
--- a/src/controllers/organisms/LogoutPrompt.js
+++ b/src/controllers/organisms/LogoutPrompt.js
@@ -0,0 +1,33 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var dis = require("../../dispatcher");
+
+module.exports = {
+    logOut: function() {
+        dis.dispatch({action: 'logout'});
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    cancelPrompt: function() {
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+};
+
--- a/src/controllers/organisms/MemberList.js
+++ b/src/controllers/organisms/MemberList.js
@@ -0,0 +1,182 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Modal = require("../../Modal");
+var sdk = require('../../index');
+
+var INITIAL_LOAD_NUM_MEMBERS = 50;
+
+module.exports = {
+    getInitialState: function() {
+        if (!this.props.roomId) return { members: [] };
+        var cli = MatrixClientPeg.get();
+        var room = cli.getRoom(this.props.roomId);
+        if (!room) return { members: [] };
+
+        this.memberDict = this.getMemberDict();
+
+        var members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
+        return {
+            members: members
+        };
+    },
+
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+        cli.on("Room", this.onRoom); // invites
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room", this.onRoom);
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
+        }
+    },
+
+    componentDidMount: function() {
+        var self = this;
+
+        // Lazy-load in more than the first N members
+        setTimeout(function() {
+            if (!self.isMounted()) return;
+            self.setState({
+                members: self.roomMembers()
+            });
+        }, 50);
+
+        // Attach a SINGLE listener for global presence changes then locate the
+        // member tile and re-render it. This is more efficient than every tile
+        // evar attaching their own listener.
+        function updateUserState(event, user) {
+            // XXX: evil hack to track the age of this presence info.
+            // this should be removed once syjs-28 is resolved in the JS SDK itself.
+            user.lastPresenceTs = Date.now();
+
+            var tile = self.refs[user.userId];
+
+            if (tile) {
+                self._updateList(); // reorder the membership list
+            }
+        }
+        // FIXME: we should probably also reset 'lastActiveAgo' to zero whenever
+        // we see a typing notif from a user, as we don't get presence updates for those.
+        MatrixClientPeg.get().on("User.presence", updateUserState);
+        this.userPresenceFn = updateUserState;
+    },
+    // Remember to set 'key' on a MemberList to the ID of the room it's for
+    /*componentWillReceiveProps: function(newProps) {
+    },*/
+
+    onRoom: function(room) {
+        if (room.roomId !== this.props.roomId) {
+            return;
+        }
+        // We listen for room events because when we accept an invite
+        // we need to wait till the room is fully populated with state
+        // before refreshing the member list else we get a stale list.
+        this._updateList();
+    },
+
+    onRoomStateMember: function(ev, state, member) {
+        this._updateList();
+    },
+
+    _updateList: function() {
+        this.memberDict = this.getMemberDict();
+
+        var self = this;
+        this.setState({
+            members: self.roomMembers()
+        });
+    },
+
+    onInvite: function(inputText) {
+        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var self = this;
+        // sanity check the input
+        inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
+        if (inputText[0] !== '@' || inputText.indexOf(":") === -1) {
+            console.error("Bad user ID to invite: %s", inputText);
+            Modal.createDialog(ErrorDialog, {
+                title: "Invite Error",
+                description: "Malformed user ID. Should look like '@localpart:domain'"
+            });
+            return;
+        }
+        self.setState({
+            inviting: true
+        });
+        console.log("Invite %s to %s", inputText, this.props.roomId);
+        MatrixClientPeg.get().invite(this.props.roomId, inputText).done(
+        function(res) {
+            console.log("Invited");
+            self.setState({
+                inviting: false
+            });
+        }, function(err) {
+            console.error("Failed to invite: %s", JSON.stringify(err));
+            Modal.createDialog(ErrorDialog, {
+                title: "Server error whilst inviting",
+                description: err.message
+            });
+            self.setState({
+                inviting: false
+            });
+        });
+    },
+
+    getMemberDict: function() {
+        if (!this.props.roomId) return {};
+        var cli = MatrixClientPeg.get();
+        var room = cli.getRoom(this.props.roomId);
+        if (!room) return {};
+
+        var all_members = room.currentState.members;
+
+        // XXX: evil hack until SYJS-28 is fixed
+        Object.keys(all_members).map(function(userId) {
+            if (all_members[userId].user && !all_members[userId].user.lastPresenceTs) {
+                all_members[userId].user.lastPresenceTs = Date.now();
+            }
+        });
+
+        return all_members;
+    },
+
+    roomMembers: function(limit) {
+        var all_members = this.memberDict || {};
+        var all_user_ids = Object.keys(all_members);
+
+        if (this.memberSort) all_user_ids.sort(this.memberSort);
+
+        var to_display = [];
+        var count = 0;
+        for (var i = 0; i < all_user_ids.length && (limit === undefined || count < limit); ++i) {
+            var user_id = all_user_ids[i];
+            var m = all_members[user_id];
+
+            if (m.membership == 'join' || m.membership == 'invite') {
+                to_display.push(user_id);
+                ++count;
+            }
+        }
+        return to_display;
+    }
+};
+
--- a/src/controllers/organisms/Notifier.js
+++ b/src/controllers/organisms/Notifier.js
@@ -0,0 +1,124 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var dis = require("../../dispatcher");
+
+/*
+ * Dispatches:
+ * {
+ *   action: "notifier_enabled",
+ *   value: boolean
+ * }
+ */
+
+module.exports = {
+    start: function() {
+        this.boundOnRoomTimeline = this.onRoomTimeline.bind(this);
+        MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
+        this.state = { 'toolbarHidden' : false };
+    },
+
+    stop: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener('Room.timeline', this.boundOnRoomTimeline);
+        }
+    },
+
+    supportsDesktopNotifications: function() {
+        return !!global.Notification;
+    },
+
+    havePermission: function() {
+        if (!this.supportsDesktopNotifications()) return false;
+        return global.Notification.permission == 'granted';
+    },
+
+    setEnabled: function(enable, callback) {
+        if(enable) {
+            if (!this.havePermission()) {
+                global.Notification.requestPermission(function() {
+                    if (callback) {
+                        callback();
+                        dis.dispatch({
+                            action: "notifier_enabled",
+                            value: true
+                        });
+                    }
+                });
+            }
+
+            if (!global.localStorage) return;
+            global.localStorage.setItem('notifications_enabled', 'true');
+
+            if (this.havePermission) {
+                dis.dispatch({
+                    action: "notifier_enabled",
+                    value: true
+                });
+            }
+        }
+        else {
+            if (!global.localStorage) return;
+            global.localStorage.setItem('notifications_enabled', 'false');
+            dis.dispatch({
+                action: "notifier_enabled",
+                value: false
+            });
+        }
+
+        this.setToolbarHidden(false);
+    },
+
+    isEnabled: function() {
+        if (!this.havePermission()) return false;
+
+        if (!global.localStorage) return true;
+
+        var enabled = global.localStorage.getItem('notifications_enabled');
+        if (enabled === null) return true;
+        return enabled === 'true';
+    },
+
+    setToolbarHidden: function(hidden) {
+        this.state.toolbarHidden = hidden;
+        dis.dispatch({
+            action: "notifier_enabled",
+            value: this.isEnabled()
+        });
+    },
+
+    isToolbarHidden: function() {
+        return this.state.toolbarHidden;
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (toStartOfTimeline) return;
+        if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;
+
+        if (!this.isEnabled()) {
+            return;
+        }
+
+        var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+        if (actions && actions.notify) {
+            this.displayNotification(ev, room);
+        }
+    }
+};
+
--- a/src/controllers/organisms/QuestionDialog.js
+++ b/src/controllers/organisms/QuestionDialog.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+
+module.exports = {
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "",
+            description: "",
+            button: "OK",
+            focus: true,
+        };
+    },
+};
--- a/src/controllers/organisms/RoomList.js
+++ b/src/controllers/organisms/RoomList.js
@@ -0,0 +1,124 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var RoomListSorter = require("../../RoomListSorter");
+
+var sdk = require('../../index');
+
+module.exports = {
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("Room", this.onRoom);
+        cli.on("Room.timeline", this.onRoomTimeline);
+        cli.on("Room.name", this.onRoomName);
+        cli.on("RoomState.events", this.onRoomStateEvents);
+
+        var rooms = this.getRoomList();
+        this.setState({
+            roomList: rooms,
+            activityMap: {}
+        });
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room", this.onRoom);
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+        }
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.state.activityMap[newProps.selectedRoom] = undefined;
+        this.setState({
+            activityMap: this.state.activityMap
+        });
+    },
+
+    onRoom: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (toStartOfTimeline) return;
+
+        var newState = {
+            roomList: this.getRoomList()
+        };
+        if (
+            room.roomId != this.props.selectedRoom &&
+            ev.getSender() != MatrixClientPeg.get().credentials.userId)
+        {
+            var hl = 1;
+
+            var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+            if (actions && actions.tweaks && actions.tweaks.highlight) {
+                hl = 2;
+            }
+            // obviously this won't deep copy but this shouldn't be necessary
+            var amap = this.state.activityMap;
+            amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
+
+            newState.activityMap = amap;
+        }
+        this.setState(newState);
+    },
+
+    onRoomName: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomStateEvents: function(ev, state) {
+        this.refreshRoomList();
+    },
+
+    refreshRoomList: function() {
+        var rooms = this.getRoomList();
+        this.setState({
+            roomList: rooms
+        });
+    },
+
+    getRoomList: function() {
+        return RoomListSorter.mostRecentActivityFirst(
+            MatrixClientPeg.get().getRooms().filter(function(room) {
+                var member = room.getMember(MatrixClientPeg.get().credentials.userId);
+                return member && (member.membership == "join" || member.membership == "invite");
+            })
+        );
+    },
+
+    makeRoomTiles: function() {
+        var RoomTile = sdk.getComponent('molecules.RoomTile');
+        var self = this;
+        return this.state.roomList.map(function(room) {
+            var selected = room.roomId == self.props.selectedRoom;
+            return (
+                <RoomTile
+                    room={room}
+                    key={room.roomId}
+                    selected={selected}
+                    unread={self.state.activityMap[room.roomId] === 1}
+                    highlight={self.state.activityMap[room.roomId] === 2}
+                />
+            );
+        });
+    },
+};
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -0,0 +1,442 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var React = require("react");
+var q = require("q");
+var ContentMessages = require("../../ContentMessages");
+var WhoIsTyping = require("../../WhoIsTyping");
+var Modal = require("../../Modal");
+var sdk = require('../../index');
+
+var dis = require("../../dispatcher");
+
+var PAGINATE_SIZE = 20;
+var INITIAL_SIZE = 20;
+
+module.exports = {
+    getInitialState: function() {
+        return {
+            room: this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null,
+            messageCap: INITIAL_SIZE,
+            editingRoomSettings: false,
+            uploadingRoomSettings: false,
+            numUnreadMessages: 0,
+            draggingFile: false,
+        }
+    },
+
+    componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        MatrixClientPeg.get().on("Room.name", this.onRoomName);
+        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        this.atBottom = true;
+    },
+
+    componentWillUnmount: function() {
+        if (this.refs.messageWrapper) {
+            var messageWrapper = this.refs.messageWrapper.getDOMNode();
+            messageWrapper.removeEventListener('drop', this.onDrop);
+            messageWrapper.removeEventListener('dragover', this.onDragOver);
+            messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
+            messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd);
+        }
+        dis.unregister(this.dispatcherRef);
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+            MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
+        }
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'message_send_failed':
+            case 'message_sent':
+            case 'message_resend_started':
+                this.setState({
+                    room: MatrixClientPeg.get().getRoom(this.props.roomId)
+                });
+                this.forceUpdate();
+                break;
+            case 'notifier_enabled':
+                this.forceUpdate();
+                break;
+            case 'call_state':
+                if (this.props.roomId !== payload.room_id) {
+                    break;
+                }
+                // scroll to bottom
+                var messageWrapper = this.refs.messageWrapper;
+                if (messageWrapper) {
+                    messageWrapper = messageWrapper.getDOMNode();
+                    messageWrapper.scrollTop = messageWrapper.scrollHeight;
+                }
+                break;
+        }
+    },
+
+    // MatrixRoom still showing the messages from the old room?
+    // Set the key to the room_id. Sadly you can no longer get at
+    // the key from inside the component, or we'd check this in code.
+    /*componentWillReceiveProps: function(props) {
+    },*/
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (!this.isMounted()) return;
+
+        // ignore anything that comes in whilst pagingating: we get one
+        // event for each new matrix event so this would cause a huge
+        // number of UI updates. Just update the UI when the paginate
+        // call returns.
+        if (this.state.paginating) return;
+
+        // no point handling anything while we're waiting for the join to finish:
+        // we'll only be showing a spinner.
+        if (this.state.joining) return;
+        if (room.roomId != this.props.roomId) return;
+
+        if (this.refs.messageWrapper) {
+            var messageWrapper = this.refs.messageWrapper.getDOMNode();
+            this.atBottom = (
+                messageWrapper.scrollHeight - messageWrapper.scrollTop <=
+                (messageWrapper.clientHeight + 150)
+            );
+        }
+
+        var currentUnread = this.state.numUnreadMessages;
+        if (!toStartOfTimeline &&
+                (ev.getSender() !== MatrixClientPeg.get().credentials.userId)) {
+            // update unread count when scrolled up
+            if (this.atBottom) {
+                currentUnread = 0;
+            }
+            else {
+                currentUnread += 1;
+            }
+        }
+
+
+        this.setState({
+            room: MatrixClientPeg.get().getRoom(this.props.roomId),
+            numUnreadMessages: currentUnread
+        });
+
+        if (toStartOfTimeline && !this.state.paginating) {
+            this.fillSpace();
+        }
+    },
+
+    onRoomName: function(room) {
+        if (room.roomId == this.props.roomId) {
+            this.setState({
+                room: room
+            });
+        }
+    },
+
+    onRoomMemberTyping: function(ev, member) {
+        this.forceUpdate();
+    },
+
+    componentDidMount: function() {
+        if (this.refs.messageWrapper) {
+            var messageWrapper = this.refs.messageWrapper.getDOMNode();
+
+            messageWrapper.addEventListener('drop', this.onDrop);
+            messageWrapper.addEventListener('dragover', this.onDragOver);
+            messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
+            messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
+
+            messageWrapper.scrollTop = messageWrapper.scrollHeight;
+
+            this.fillSpace();
+        }
+    },
+
+    componentDidUpdate: function() {
+        if (!this.refs.messageWrapper) return;
+
+        var messageWrapper = this.refs.messageWrapper.getDOMNode();
+
+        if (this.state.paginating && !this.waiting_for_paginate) {
+            var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
+            messageWrapper.scrollTop += heightGained;
+            this.oldScrollHeight = undefined;
+            if (!this.fillSpace()) {
+                this.setState({paginating: false});
+            }
+        } else if (this.atBottom) {
+            messageWrapper.scrollTop = messageWrapper.scrollHeight;
+            if (this.state.numUnreadMessages !== 0) {
+                this.setState({numUnreadMessages: 0});
+            }
+        }
+    },
+
+    fillSpace: function() {
+        if (!this.refs.messageWrapper) return;
+        var messageWrapper = this.refs.messageWrapper.getDOMNode();
+        if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
+            this.setState({paginating: true});
+
+            this.oldScrollHeight = messageWrapper.scrollHeight;
+
+            if (this.state.messageCap < this.state.room.timeline.length) {
+                this.waiting_for_paginate = false;
+                var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
+                this.setState({messageCap: cap, paginating: true});
+            } else {
+                this.waiting_for_paginate = true;
+                var cap = this.state.messageCap + PAGINATE_SIZE;
+                this.setState({messageCap: cap, paginating: true});
+                var self = this;
+                MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() {
+                    self.waiting_for_paginate = false;
+                    if (self.isMounted()) {
+                        self.setState({
+                            room: MatrixClientPeg.get().getRoom(self.props.roomId)
+                        });
+                    }
+                    // wait and set paginating to false when the component updates
+                });
+            }
+
+            return true;
+        }
+        return false;
+    },
+
+    onJoinButtonClicked: function(ev) {
+        var self = this;
+        MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() {
+            self.setState({
+                joining: false,
+                room: MatrixClientPeg.get().getRoom(self.props.roomId)
+            });
+        }, function(error) {
+            self.setState({
+                joining: false,
+                joinError: error
+            });
+        });
+        this.setState({
+            joining: true
+        });
+    },
+
+    onMessageListScroll: function(ev) {
+        if (this.refs.messageWrapper) {
+            var messageWrapper = this.refs.messageWrapper.getDOMNode();
+            var wasAtBottom = this.atBottom;
+            this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
+            if (this.atBottom && !wasAtBottom) {
+                this.forceUpdate(); // remove unread msg count
+            }
+        }
+        if (!this.state.paginating) this.fillSpace();
+    },
+
+    onDragOver: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        ev.dataTransfer.dropEffect = 'none';
+
+        var items = ev.dataTransfer.items;
+        if (items.length == 1) {
+            if (items[0].kind == 'file') {
+                this.setState({ draggingFile : true });
+                ev.dataTransfer.dropEffect = 'copy';
+            }
+        }
+    },
+
+    onDrop: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.setState({ draggingFile : false });
+        var files = ev.dataTransfer.files;
+        if (files.length == 1) {
+            this.uploadFile(files[0]);
+        }
+    },
+
+    onDragLeaveOrEnd: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.setState({ draggingFile : false });
+    },
+
+    uploadFile: function(file) {
+        this.setState({
+            upload: {
+                fileName: file.name,
+                uploadedBytes: 0,
+                totalBytes: file.size
+            }
+        });
+        var self = this;
+        ContentMessages.sendContentToRoom(
+            file, this.props.roomId, MatrixClientPeg.get()
+        ).progress(function(ev) {
+            //console.log("Upload: "+ev.loaded+" / "+ev.total);
+            self.setState({
+                upload: {
+                    fileName: file.name,
+                    uploadedBytes: ev.loaded,
+                    totalBytes: ev.total
+                }
+            });
+        }).finally(function() {
+            self.setState({
+                upload: undefined
+            });
+        }).done(undefined, function() {
+            // display error message
+        });
+    },
+
+    getWhoIsTypingString: function() {
+        return WhoIsTyping.whoIsTypingString(this.state.room);
+    },
+
+    getEventTiles: function() {
+        var ret = [];
+        var count = 0;
+
+        var EventTile = sdk.getComponent('molecules.EventTile');
+
+        for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
+            var mxEv = this.state.room.timeline[i];
+
+            if (!EventTile.supportsEventType(mxEv.getType())) {
+                continue;
+            }
+
+            var continuation = false;
+            var last = false;
+            if (i == this.state.room.timeline.length - 1) {
+                last = true;
+            }
+            if (i > 0 && count < this.state.messageCap - 1) {
+                if (this.state.room.timeline[i].sender &&
+                    this.state.room.timeline[i - 1].sender &&
+                    (this.state.room.timeline[i].sender.userId ===
+                        this.state.room.timeline[i - 1].sender.userId) &&
+                    (this.state.room.timeline[i].getType() ==
+                        this.state.room.timeline[i - 1].getType())
+                    )
+                {
+                    continuation = true;
+                }
+            }
+            ret.unshift(
+                <li key={mxEv.getId()}><EventTile mxEvent={mxEv} continuation={continuation} last={last}/></li>
+            );
+            ++count;
+        }
+        return ret;
+    },
+
+    uploadNewState: function(new_name, new_topic, new_join_rule, new_history_visibility, new_power_levels) {
+        var old_name = this.state.room.name;
+
+        var old_topic = this.state.room.currentState.getStateEvents('m.room.topic', '');
+        if (old_topic) {
+            old_topic = old_topic.getContent().topic;
+        } else {
+            old_topic = "";
+        }
+
+        var old_join_rule = this.state.room.currentState.getStateEvents('m.room.join_rules', '');
+        if (old_join_rule) {
+            old_join_rule = old_join_rule.getContent().join_rule;
+        } else {
+            old_join_rule = "invite";
+        }
+
+        var old_history_visibility = this.state.room.currentState.getStateEvents('m.room.history_visibility', '');
+        if (old_history_visibility) {
+            old_history_visibility = old_history_visibility.getContent().history_visibility;
+        } else {
+            old_history_visibility = "shared";
+        }
+
+        var deferreds = [];
+
+        if (old_name != new_name && new_name != undefined && new_name) {
+            deferreds.push(
+                MatrixClientPeg.get().setRoomName(this.state.room.roomId, new_name)
+            );
+        }
+
+        if (old_topic != new_topic && new_topic != undefined) {
+            deferreds.push(
+                MatrixClientPeg.get().setRoomTopic(this.state.room.roomId, new_topic)
+            );
+        }
+
+        if (old_join_rule != new_join_rule && new_join_rule != undefined) {
+            deferreds.push(
+                MatrixClientPeg.get().sendStateEvent(
+                    this.state.room.roomId, "m.room.join_rules", {
+                        join_rule: new_join_rule,
+                    }, ""
+                )
+            );
+        }
+
+        if (old_history_visibility != new_history_visibility && new_history_visibility != undefined) {
+            deferreds.push(
+                MatrixClientPeg.get().sendStateEvent(
+                    this.state.room.roomId, "m.room.history_visibility", {
+                        history_visibility: new_history_visibility,
+                    }, ""
+                )
+            );
+        }
+
+        if (new_power_levels) {
+            deferreds.push(
+                MatrixClientPeg.get().sendStateEvent(
+                    this.state.room.roomId, "m.room.power_levels", new_power_levels, ""
+                )
+            );
+        }
+
+        if (deferreds.length) {
+            var self = this;
+            q.all(deferreds).fail(function(err) {
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failed to set state",
+                    description: err.toString()
+                });
+            }).finally(function() {
+                self.setState({
+                    uploadingRoomSettings: false,
+                });
+            });
+        } else {
+            this.setState({
+                editingRoomSettings: false,
+                uploadingRoomSettings: false,
+            });
+        }
+    }
+};
--- a/src/controllers/organisms/UserSettings.js
+++ b/src/controllers/organisms/UserSettings.js
@@ -0,0 +1,54 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var q = require('q');
+var version = require('../../../package.json').version;
+
+module.exports = {
+    Phases: {
+        Loading: "loading",
+        Display: "display",
+    },
+
+    getInitialState: function() {
+        return {
+            avatarUrl: null,
+            threePids: [],
+            clientVersion: version,
+            phase: this.Phases.Loading,
+        };
+    },
+
+    componentWillMount: function() {
+        var self = this;
+        var cli = MatrixClientPeg.get();
+
+        var profile_d = cli.getProfileInfo(cli.credentials.userId);
+        var threepid_d = cli.getThreePids();
+
+        q.all([profile_d, threepid_d]).then(
+            function(resps) {
+                self.setState({
+                    avatarUrl: resps[0].avatar_url,
+                    threepids: resps[1].threepids,
+                    phase: self.Phases.Display,
+                });
+            },
+            function(err) { console.err(err); }
+        );
+    }
+}
--- a/src/controllers/pages/MatrixChat.js
+++ b/src/controllers/pages/MatrixChat.js
@@ -0,0 +1,419 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var RoomListSorter = require("../../RoomListSorter");
+var Presence = require("../../Presence");
+var dis = require("../../dispatcher");
+
+var sdk = require('../../index');
+var MatrixTools = require('../../MatrixTools');
+var linkifyMatrix = require("../../linkify-matrix");
+
+var Cas = require("../../CasLogic");
+
+module.exports = {
+    PageTypes: {
+        RoomView: "room_view",
+        UserSettings: "user_settings",
+        CreateRoom: "create_room",
+        RoomDirectory: "room_directory",
+    },
+
+    AuxPanel: {
+        RoomSettings: "room_settings",
+    },
+
+    getInitialState: function() {
+        var s = {
+            logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials),
+            collapse_lhs: false,
+            collapse_rhs: false,
+            ready: false,
+        };
+        if (s.logged_in) {
+            if (MatrixClientPeg.get().getRooms().length) {
+                s.page_type = this.PageTypes.RoomView;
+            } else {
+                s.page_type = this.PageTypes.RoomDirectory;
+            }
+        }
+        return s;
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        if (this.state.logged_in) {
+            this.startMatrixClient();
+        }
+        this.focusComposer = false;
+        document.addEventListener("keydown", this.onKeyDown);
+        window.addEventListener("focus", this.onFocus);
+        if (this.state.logged_in) {
+            this.notifyNewScreen('');
+        } else {
+            this.notifyNewScreen('login');
+        }
+
+        // this can technically be done anywhere but doing this here keeps all
+        // the routing url path logic together.
+        if (this.onAliasClick) {
+            linkifyMatrix.onAliasClick = this.onAliasClick;
+        }
+        if (this.onUserClick) {
+            linkifyMatrix.onUserClick = this.onUserClick;
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        document.removeEventListener("keydown", this.onKeyDown);
+        window.removeEventListener("focus", this.onFocus);
+    },
+
+    componentDidUpdate: function() {
+        if (this.focusComposer) {
+            dis.dispatch({action: 'focus_composer'});
+            this.focusComposer = false;
+        }
+    },
+
+    onAction: function(payload) {
+        var roomIndexDelta = 1;
+        var Notifier = sdk.getComponent('organisms.Notifier');
+
+        var self = this;
+        switch (payload.action) {
+            case 'logout':
+                if (window.localStorage) {
+                    window.localStorage.clear();
+                }
+                Notifier.stop();
+                Presence.stop();
+                MatrixClientPeg.get().stopClient();
+                MatrixClientPeg.get().removeAllListeners();
+                MatrixClientPeg.unset();
+                this.notifyNewScreen('login');
+                this.replaceState({
+                    logged_in: false,
+                    ready: false
+                });
+                break;
+            case 'start_registration':
+                if (this.state.logged_in) return;
+                var newState = payload.params || {};
+                newState.screen = 'register';
+                if (
+                    payload.params &&
+                    payload.params.client_secret &&
+                    payload.params.session_id &&
+                    payload.params.hs_url &&
+                    payload.params.is_url &&
+                    payload.params.sid
+                ) {
+                    newState.register_client_secret = payload.params.client_secret;
+                    newState.register_session_id = payload.params.session_id;
+                    newState.register_hs_url = payload.params.hs_url;
+                    newState.register_is_url = payload.params.is_url;
+                    newState.register_id_sid = payload.params.sid;
+                }
+                this.replaceState(newState);
+                this.notifyNewScreen('register');
+                break;
+            case 'start_login':
+                if (this.state.logged_in) return;
+                this.replaceState({
+                    screen: 'login'
+                });
+                this.notifyNewScreen('login');
+                break;
+            case 'cas_login':
+                if (this.state.logged_in) return;
+
+                var self = this;
+                var client = MatrixClientPeg.get();
+                var serviceUrl = Cas.getServiceUrl();
+
+                client.loginWithCas(payload.params.ticket, serviceUrl).done(function(data) {
+                    MatrixClientPeg.replaceUsingAccessToken(
+                        client.getHomeserverUrl(), client.getIdentityServerUrl(),
+                        data.user_id, data.access_token
+                    );
+                    self.setState({
+                        screen: undefined,
+                        logged_in: true
+                    });
+                    self.startMatrixClient();
+                    self.notifyNewScreen('');
+                }, function(error) {
+                    self.notifyNewScreen('login');
+                    self.setState({errorText: 'Login failed.'});
+                });
+
+                break;
+            case 'view_room':
+                this.focusComposer = true;
+                var newState = {
+                    currentRoom: payload.room_id,
+                    page_type: this.PageTypes.RoomView,
+                };
+                if (this.sdkReady) {
+                    // if the SDK is not ready yet, remember what room
+                    // we're supposed to be on but don't notify about
+                    // the new screen yet (we won't be showing it yet)
+                    // The normal case where this happens is navigating
+                    // to the room in the URL bar on page load.
+                    var presentedId = payload.room_id;
+                    var room = MatrixClientPeg.get().getRoom(payload.room_id);
+                    if (room) {
+                        var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
+                        if (theAlias) presentedId = theAlias;
+                    }
+                    this.notifyNewScreen('room/'+presentedId);
+                    newState.ready = true;
+                }
+                this.setState(newState);
+                break;
+            case 'view_prev_room':
+                roomIndexDelta = -1;
+            case 'view_next_room':
+                var allRooms = RoomListSorter.mostRecentActivityFirst(
+                    MatrixClientPeg.get().getRooms()
+                );
+                var roomIndex = -1;
+                for (var i = 0; i < allRooms.length; ++i) {
+                    if (allRooms[i].roomId == this.state.currentRoom) {
+                        roomIndex = i;
+                        break;
+                    }
+                }
+                roomIndex = (roomIndex + roomIndexDelta) % allRooms.length;
+                if (roomIndex < 0) roomIndex = allRooms.length - 1;
+                this.focusComposer = true;
+                this.setState({
+                    currentRoom: allRooms[roomIndex].roomId
+                });
+                this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+                break;
+            case 'view_indexed_room':
+                var allRooms = RoomListSorter.mostRecentActivityFirst(
+                    MatrixClientPeg.get().getRooms()
+                );
+                var roomIndex = payload.roomIndex;
+                if (allRooms[roomIndex]) {
+                    this.focusComposer = true;
+                    this.setState({
+                        currentRoom: allRooms[roomIndex].roomId
+                    });
+                    this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+                }
+                break;
+            case 'view_room_alias':
+                var foundRoom = MatrixTools.getRoomForAlias(
+                    MatrixClientPeg.get().getRooms(), payload.room_alias
+                );
+                if (foundRoom) {
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: foundRoom.roomId
+                    });
+                    return;
+                }
+                // resolve the alias and *then* view it
+                MatrixClientPeg.get().getRoomIdForAlias(payload.room_alias).done(
+                function(result) {
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: result.room_id
+                    });
+                });
+                break;
+            case 'view_user_settings':
+                this.setState({
+                    page_type: this.PageTypes.UserSettings,
+                });
+                break;
+            case 'view_create_room':
+                this.setState({
+                    page_type: this.PageTypes.CreateRoom,
+                });
+                break;
+            case 'view_room_directory':
+                this.setState({
+                    page_type: this.PageTypes.RoomDirectory,
+                });
+                break;
+            case 'notifier_enabled':
+                this.forceUpdate();
+                break;
+            case 'hide_left_panel':
+                this.setState({
+                    collapse_lhs: true,
+                });
+                break;
+            case 'show_left_panel':
+                this.setState({
+                    collapse_lhs: false,
+                });
+                break;
+            case 'hide_right_panel':
+                this.setState({
+                    collapse_rhs: true,
+                });
+                break;
+            case 'show_right_panel':
+                this.setState({
+                    collapse_rhs: false,
+                });
+                break;
+        }
+    },
+
+    onLoggedIn: function() {
+        this.setState({
+            screen: undefined,
+            logged_in: true
+        });
+        this.startMatrixClient();
+        this.notifyNewScreen('');
+    },
+
+    startMatrixClient: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
+        var cli = MatrixClientPeg.get();
+        var self = this;
+        cli.on('syncComplete', function() {
+            self.sdkReady = true;
+
+            if (self.starting_room_alias) {
+                dis.dispatch({
+                    action: 'view_room_alias',
+                    room_alias: self.starting_room_alias
+                });
+                delete self.starting_room_alias;
+            } else {
+                if (!self.state.currentRoom) {
+                    var firstRoom = null;
+                    if (cli.getRooms() && cli.getRooms().length) {
+                        firstRoom = RoomListSorter.mostRecentActivityFirst(
+                            cli.getRooms()
+                        )[0].roomId;
+                        self.setState({ready: true, currentRoom: firstRoom, page_type: self.PageTypes.RoomView});
+                    } else {
+                        self.setState({ready: true, page_type: self.PageTypes.RoomDirectory});
+                    }
+                } else {
+                    self.setState({ready: true, page_type: self.PageTypes.RoomView});
+                }
+
+                // we notifyNewScreen now because now the room will actually be displayed,
+                // and (mostly) now we can get the correct alias.
+                var presentedId = self.state.currentRoom;
+                var room = MatrixClientPeg.get().getRoom(self.state.currentRoom);
+                if (room) {
+                    var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
+                    if (theAlias) presentedId = theAlias;
+                }
+                self.notifyNewScreen('room/'+presentedId);
+                dis.dispatch({action: 'focus_composer'});
+            }
+        });
+        cli.on('Call.incoming', function(call) {
+            dis.dispatch({
+                action: 'incoming_call',
+                call: call
+            });
+        });
+        Notifier.start();
+        Presence.start();
+        cli.startClient();
+    },
+
+    onKeyDown: function(ev) {
+        if (ev.altKey) {
+            if (ev.ctrlKey && ev.keyCode > 48 && ev.keyCode < 58) {
+                dis.dispatch({
+                    action: 'view_indexed_room',
+                    roomIndex: ev.keyCode - 49,
+                });
+                ev.stopPropagation();
+                ev.preventDefault();
+                return;
+            }
+            switch (ev.keyCode) {
+                case 38:
+                    dis.dispatch({action: 'view_prev_room'});
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    break;
+                case 40:
+                    dis.dispatch({action: 'view_next_room'});
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    break;
+            }
+        }
+    },
+
+    onFocus: function(ev) {
+        dis.dispatch({action: 'focus_composer'});
+    },
+
+    showScreen: function(screen, params) {
+        if (screen == 'register') {
+            dis.dispatch({
+                action: 'start_registration',
+                params: params
+            });
+        } else if (screen == 'login') {
+            dis.dispatch({
+                action: 'start_login',
+                params: params
+            });
+        } else if (screen == 'cas_login') {
+            dis.dispatch({
+                action: 'cas_login',
+                params: params
+            });
+        } else if (screen.indexOf('room/') == 0) {
+            var roomString = screen.split('/')[1];
+            if (roomString[0] == '#') {
+                if (this.state.logged_in) {
+                    dis.dispatch({
+                        action: 'view_room_alias',
+                        room_alias: roomString
+                    });
+                } else {
+                    // Okay, we'll take you here soon...
+                    this.starting_room_alias = roomString;
+                    // ...but you're still going to have to log in.
+                    this.notifyNewScreen('login');
+                }
+            } else {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: roomString
+                });
+            }
+        }
+    },
+
+    notifyNewScreen: function(screen) {
+        if (this.props.onNewScreen) {
+            this.props.onNewScreen(screen);
+        }
+    }
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
David Baker	966f44baa1	bump js-sdk -> 0.3.0 on the right branch	2015-10-28 18:06:10 +00:00
Kegsay	184af9df76	Merge pull request #25 from matrix-org/246-creating-room-state Add creatingRoom state to know when to show a spinner.	2015-10-28 11:38:47 +00:00
Kegan Dougal	2a1b9cd716	Add creatingRoom state to know when to show a spinner.	2015-10-27 17:01:03 +00:00
Kegsay	15af44f5fc	Merge pull request #24 from matrix-org/linkify Add callback support for linkified users/aliases	2015-10-27 12:25:20 +00:00
Kegsay	e6f9c6e777	Merge pull request #23 from matrix-org/kegan/reg-errors-176 Add missing enum value to registration password complexity check	2015-10-27 11:11:39 +00:00
Kegan Dougal	16ddb47466	Defer entirely to the end app for handling links	2015-10-27 10:44:41 +00:00
Kegsay	66b577dc89	Merge pull request #22 from matrix-org/kegan/delete-empty-files Remove empty controllers	2015-10-27 10:19:14 +00:00
Kegan Dougal	77d1b9af04	Hook up aliases via listeners too.	2015-10-27 09:58:55 +00:00
Kegan Dougal	24ac801417	Invoke onUserClick to allow impls to do whatever on user clicks.	2015-10-26 17:59:49 +00:00
Kegan Dougal	11ef1ac336	Prevent the url from being butchered when clicking user IDs	2015-10-26 17:36:03 +00:00
Kegan Dougal	a1444d3214	Linkify room aliases. Add listener for user ID clicks.	2015-10-26 17:32:31 +00:00
Kegsay	a2b77ad5b5	Merge pull request #21 from matrix-org/220-login-error-msgs Login error messages	2015-10-26 16:58:46 +00:00
David Baker	5a760b71d0	Make ChangeAvatar support room avatars and tweak RoomAvatar respond to componentWillReceiveProps	2015-10-23 17:34:53 +01:00
Matthew Hodgson	03dfd57a79	really kill mime types as they are ugly (3rd time lucky)	2015-10-22 16:32:27 +01:00
David Baker	7e93b75aa0	API Change: better fallback for room avatars	2015-10-22 13:08:35 +01:00
David Baker	549d992293	API change: Make EventTiles which hold stuff common to all events that appear in a room timeline.	2015-10-21 17:50:40 +01:00
Kegan Dougal	ac5111c162	Add missing enum value	2015-10-21 17:44:05 +01:00
Kegan Dougal	0488f03b5a	Remove empty controllers	2015-10-21 15:36:59 +01:00
Kegan Dougal	d4a5ab11d4	Fix NPE if you cold boot vector on a URL with a room which you were invited to but not yet joined.	2015-10-21 14:45:39 +01:00
Kegan Dougal	d1af5a2232	More tweaks on error messages	2015-10-21 14:30:59 +01:00
Matthew Hodgson	feaf2a319b	Merge pull request #20 from matrix-org/screen-sharing Screen sharing	2015-10-21 01:35:16 +01:00
Matthew Hodgson	3b988b0eac	set up remoteAudioElement	2015-10-21 01:21:39 +01:00
Matthew Hodgson	98ea35253a	shift-click the video button to screenshare rather than overriding the button entirely.	2015-10-21 01:21:21 +01:00
Kegan Dougal	8ff7d87b38	Bodge to make video = screen sharing	2015-10-20 16:45:26 +01:00
Kegan Dougal	48f162b9df	Better error messages	2015-10-20 14:03:37 +01:00
David Baker	3d8d9bac8e	Allow the dispatcher to dispatch sync if required.	2015-10-20 11:02:54 +01:00
David Baker	1041ee654e	Update for breaking js-sdk RoomAvatar / MemberAvatar changes	2015-10-20 10:31:29 +01:00
Kegan Dougal	78f2f7cfd0	Add in voip mute video/audio code. Needs dev js-sdk	2015-10-20 09:55:00 +01:00
David Baker	6baf405a05	Remove the 'resending' state which was duplicating a property of the event itself for no obvious reason. Remove onResend whose purpose was mostly to manage that state (and really should have been 'onResendClicked'). Listen for action to see when a message is resent.	2015-10-15 14:09:19 +01:00
David Baker	02a2e06d52	unused code	2015-10-13 16:03:24 +01:00
David Baker	9e596ebb75	Merge pull request #19 from stevenhammerton/sh-cas-auth Add support for CAS login	2015-10-13 14:25:39 +01:00
David Baker	f7d3d4f9a9	Remove console.log	2015-10-13 11:44:45 +01:00
David Baker	d12ca92ea7	Avoid double updating: setting the state will cause a re-render so forcing an update is redundant. Also bump js sdk dep to newest to match vector.	2015-10-13 11:12:06 +01:00
Steven Hammerton	fc333067c2	Rename required var to match convention	2015-10-12 17:38:04 +01:00
David Baker	030124a59a	Make state.members always defined	2015-10-12 16:25:49 +01:00
Steven Hammerton	4e0d930014	Pull down some CAS stuff from vector into controller and logic class	2015-10-12 10:20:03 +01:00
Matthew Hodgson	f6d577d0c6	track RHS collapse state	2015-10-11 16:07:01 +01:00
Matthew Hodgson	8228a7d485	track whether the LHS is collapsed. (shouldn't this be vector specific too?)	2015-10-11 13:49:44 +01:00
Matthew Hodgson	c5e3891a5a	shrink default roomavatar size to 36x36. surely this is vector specific...	2015-10-11 02:08:39 +01:00
Steven Hammerton	3f67d8541f	Add support for CAS login	2015-10-10 18:54:19 +01:00
David Baker	05d19121d8	Slightly change memberlist api to shift the sorting into the right place (in the skin).	2015-10-09 17:24:48 +01:00
David Baker	e158eec94d	Unset matrix client first otherwise login sets it, the it gets unset and you can't log in again.	2015-10-09 13:48:17 +01:00
David Baker	53a7f4b3a8	Set state to ready only if the SDK is synced.	2015-10-09 12:05:40 +01:00
David Baker	0791cac572	Add method to Modal to create dialog with instantiated React elements as well as Classes.	2015-10-09 11:54:46 +01:00
David Baker	05f7a3b4d1	Remove now redundant displayname stuff from UserSettings now it's in ChangeDisplayName	2015-10-07 18:44:32 +01:00
David Baker	79e468217a	Add button for user settings and a change display name widget	2015-10-07 18:19:29 +01:00
David Baker	27ca7b48f7	Just do all dispatches async: setting the flag obviously does not work for more than 2 nested dispatches.	2015-10-05 18:43:22 +01:00
David Baker	b8dd2452db	Display correct message for when an invited but not joined user is kicked.	2015-10-05 16:44:50 +01:00
David Baker	a1892ee963	Improve url / screen handling Including taking you to the room you asked for originally after login	2015-10-05 15:31:08 +01:00
David Baker	ad313d7711	Merge branch 'vector-merge'	2015-10-02 18:55:53 +01:00
David Baker	55f656f150	0.0.2	2015-10-02 18:55:09 +01:00
David Baker	711272a7c9	Merge pull request #18 from matrix-org/vector-merge Vector merge	2015-10-02 18:50:52 +01:00
David Baker	2d3b87d56d	Don't set empty mime types on metadata.	2015-10-02 18:37:15 +01:00
David Baker	2bce4e4d62	Merge `c62d97ca04` from vector-im The hack is evil. Not dirty.	2015-10-02 14:37:34 +01:00
David Baker	54048ee37c	Update Readme	2015-10-01 16:02:21 +01:00
David Baker	7de136a930	Port over new logic for filtering actions: makes the end call button appear & disappear approriately	2015-10-01 10:19:18 +01:00
David Baker	5004a3a5b3	Make end call button work for conf calls	2015-10-01 09:42:58 +01:00
David Baker	cb89d3760a	Hacks to make sure we don't end up with multiple split-brain CallHandlers when npm linked.	2015-09-30 18:21:25 +01:00
David Baker	b68665ead5	Add support for the basic notion of conference calls and an experimental concept of modules to provide the actual functionality. Rejig Skinner to be simpler.	2015-09-30 16:50:46 +01:00
David Baker	9fb5702c2f	make MatrixClientPeg an actual global too otherwise things go very wierd	2015-09-28 17:46:49 +01:00
David Baker	8af6c2275b	Make it easier to override default avatar urls	2015-09-28 17:06:13 +01:00
David Baker	3792d5494a	Dispatcher should be a global too	2015-09-28 14:48:50 +01:00
David Baker	3be50e327d	Manually merge memberlist fix from vector master	2015-09-28 11:32:00 +01:00
David Baker	4472f63b5f	We need js sdk 0.2.1 for getRoomIdForAlias	2015-09-25 17:49:35 +01:00
David Baker	6348c2cf99	Change how viewing a room alias works to make way for jumping into a room once you've logged in.	2015-09-25 17:22:42 +01:00
David Baker	bc2eca16f9	Unused guff	2015-09-25 16:25:20 +01:00
David Baker	fe369858b7	Unused variables & redundant stuff	2015-09-25 15:17:46 +01:00
David Baker	56530d80d7	Add link to guthub issue about webpack's loader path silliness	2015-09-25 13:53:58 +01:00
David Baker	d172aaf41f	Add -loader packages as deps Even though we don't use webpack directly, webpack needs the loaders to be in the dependency package's node_modules directory, so this lets packages that depend on us use webpack.	2015-09-25 13:39:21 +01:00
David Baker	5af43dc6a9	Remove unused action dispatch	2015-09-23 09:39:49 +01:00
David Baker	96627d4477	Port membertile fix	2015-09-22 16:51:16 +01:00
David Baker	3838569625	Port memberlist branch fixes	2015-09-22 16:37:39 +01:00
David Baker	b32658cfd0	Load fewer events when switching to a room: they take surprisingly long to render.	2015-09-22 15:18:16 +01:00
David Baker	980ce7fdae	Remainder of the controllers from vector	2015-09-21 17:23:51 +01:00
David Baker	49c5f7cb95	Use same protocol as client was loaded over for recaptcha to prevent JS origin errors.	2015-09-21 16:53:50 +01:00
David Baker	1b82d92fa1	Port registration fixes	2015-09-21 16:38:12 +01:00
David Baker	65498600de	port login fixes	2015-09-21 16:36:17 +01:00
David Baker	28c4a648be	Port roomlist fixes	2015-09-21 16:31:31 +01:00
David Baker	e2c9afb278	port create room	2015-09-21 16:28:39 +01:00
David Baker	29d2ed7191	Merge userselector changes	2015-09-21 16:17:29 +01:00
David Baker	82aa603596	Merge in resend support	2015-09-21 16:14:19 +01:00
David Baker	a8eb93bd6f	Member list	2015-09-18 18:39:16 +01:00
David Baker	31ee667102	Room header	2015-09-18 14:34:36 +01:00
David Baker	b9538a077c	Missed files from last commit	2015-09-18 13:54:20 +01:00
David Baker	343de6245f	Port ServerConfig changes	2015-09-18 13:33:51 +01:00
David Baker	08b5888d03	More porting: make sending messages work again!	2015-09-18 10:44:57 +01:00
David Baker	abeed92501	Partial porting over of vector controller logic to react sdk.	2015-09-17 18:23:38 +01:00
David Baker	6eb18f0268	Fix reskindex	2015-09-17 18:21:35 +01:00
David Baker	d938ba70d3	Port over room leaving	2015-09-17 12:10:01 +01:00
David Baker	88aaf82c88	Backport: linkify emotes	2015-09-16 16:23:35 +01:00
David Baker	f3b30477ce	Backport: add other presets into room presets	2015-09-16 16:10:39 +01:00
David Baker	a4cbbf0d92	Backport Notifier improvements from Vector, including TextForEvent	2015-09-16 14:48:49 +01:00
David Baker	25ab56106a	Backport labels & placeholders for Editable text from Vector	2015-09-16 14:18:25 +01:00
David Baker	6cca5f4c05	backport fixes from vector	2015-09-16 13:48:24 +01:00
David Baker	aba4c1e9af	We don't use catw here anymore	2015-09-15 14:46:41 +01:00
David Baker	2d0c8ac9ff	Working skin stuff, minus css	2015-09-15 13:34:36 +01:00
David Baker	f3b9f8c799	WIP reworking of skinning and app integration process	2015-09-11 15:42:11 +01:00
David Baker	9b73d6ed6d	react-tools is dead. Long live Babel.	2015-09-10 15:28:30 +01:00
David Baker	a06e1f23ea	Spurious react-loader require	2015-09-10 15:08:26 +01:00
David Baker	635041470f	There is no MatrixChat in the sdk anymore (well, only a controller). Advertise the Component Broker instead.	2015-09-10 15:07:34 +01:00
David Baker	a124e53a9a	Component broker loading files never really worked very well anyway, and now it can't work because they're all defined elsewhere.	2015-09-10 15:06:42 +01:00
David Baker	6cc88e4ef3	Remove stuff that's going into the base skin	2015-09-09 16:57:55 +01:00
David Baker	e1a6ede17b	Ignore all module caches and make the built js the default include root	2015-09-08 18:45:00 +01:00
David Baker	8fbce5fce8	de-tab	2015-09-08 16:17:06 +01:00
David Baker	2d9419c380	Merge pull request #17 from ndarilek/master Make HTML more semantic to improve accessibility	2015-08-10 13:45:36 +01:00
Nolan Darilek	bd0db01515	Add landmarks around major view regions for easier navigation.	2015-08-08 18:09:37 -05:00
Nolan Darilek	517bb01f33	Event tiles are now items in a list, improves accessibility.	2015-08-08 17:36:19 -05:00
David Baker	ec8a815688	Ignore olm. There is no olm.	2015-08-07 11:51:13 +01:00
David Baker	5a87b9759f	update to new js-sdk	2015-08-07 11:27:13 +01:00