0.6.1

Prepare changelog for v0.6.1
Bump to react-sdk 0.5.2
2016-04-22 11:35:51 +01:00 · 2016-04-22 11:35:50 +01:00 · 2016-04-22 11:30:33 +01:00 · 2016-04-20 13:46:59 +01:00 · 2016-04-20 12:32:57 +01:00 · 2016-04-20 12:29:32 +01:00
67 changed files with 2535 additions and 512 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
-node_modules
-vector/bundle.*
-lib
-.DS_Store
-key.pem
-cert.pem
-vector/components.css
-packages/
+/cert.pem
+/.DS_Store
+/karma-reports
+/key.pem
+/lib
+/node_modules
+/packages/
+/vector/bundle.*
+/vector/components.css
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,54 @@
+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)
@@ -55,7 +106,7 @@ Changes in vector v0.1.2 (2015-10-28)
 * Better hover-over on member list
 * Support CAS auth
 * Many other bug fixes
- 
+
 Changes in vector v0.1.1 (2015-08-10)
 ======================================

--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,8 +13,11 @@ npm install
 # 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
+npm run build:dev

 # gzip up ./vector
 rm vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -0,0 +1,136 @@
+// 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: [
+            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'),
+                ],
+            },
+            devtool: 'inline-source-map',
+        },
+    });
+};
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vector-web",
-  "version": "0.4.1",
+  "version": "0.6.1",
  "description": "Vector webapp",
  "author": "matrix.org",
  "repository": {
@@ -16,7 +16,9 @@
    "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": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
    "build": "npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
    "package": "scripts/package.sh",
    "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",
@@ -25,7 +27,9 @@
    "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
    "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "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"
  },
  "dependencies": {
    "babel-polyfill": "^6.5.0",
@@ -33,19 +37,19 @@
    "extract-text-webpack-plugin": "^0.9.1",
    "filesize": "^3.1.2",
    "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#7dc736d",
+    "gemini-scrollbar": "matrix-org/gemini-scrollbar#87ebaa7",
    "gfm.css": "^1.1.1",
    "highlight.js": "^9.0.0",
    "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.5.0",
-    "matrix-react-sdk": "^0.3.1",
+    "matrix-js-sdk": "^0.5.2",
+    "matrix-react-sdk": "^0.5.2",
    "modernizr": "^3.1.0",
    "q": "^1.4.1",
-    "react": "^0.14.2",
-    "react-dnd": "^2.0.2",
-    "react-dnd-html5-backend": "^2.0.0",
-    "react-dom": "^0.14.2",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#869a86b",
+    "react": "^15.0.1",
+    "react-dnd": "^2.1.4",
+    "react-dnd-html5-backend": "^2.1.2",
+    "react-dom": "^15.0.1",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
    "sanitize-html": "^1.11.1"
  },
  "devDependencies": {
@@ -54,11 +58,24 @@
    "babel-loader": "^5.3.2",
    "catw": "^1.0.1",
    "css-raw-loader": "^0.1.1",
+    "expect": "^1.16.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-test-utils": "^15.0.1",
+    "react-addons-perf": "^15.0",
    "rimraf": "^2.4.3",
    "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.13"
+    "webpack": "^1.12.14"
  }
 }
--- a/scripts/issues-burndown.pl
+++ b/scripts/issues-burndown.pl
@@ -0,0 +1,124 @@
+#!/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
@@ -0,0 +1,104 @@
+#!/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/src/VectorConferenceHandler.js
+++ b/src/VectorConferenceHandler.js
@@ -44,6 +44,7 @@ ConferenceCall.prototype.setup = function() {
        // 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;
    });
 };
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -19,6 +19,9 @@ limitations under the License.
 * 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;
@@ -29,6 +32,7 @@ module.exports.components['structures.LeftPanel'] = require('./components/struct
 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.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -47,12 +47,19 @@ module.exports = React.createClass({

    render: function() {
        var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
        return (
            <div className="mx_BottomLeftMenu">
                <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
+                    <div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
+                        <TintableSvg src="img/icons-create-room.svg" width="24" height="24"/>
+                    </div>
+                    <div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
+                        <TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
+                    </div>
+                    <div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
+                        <TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
+                    </div>
                </div>
            </div>
        );
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -31,6 +31,7 @@ var LeftPanel = React.createClass({
    getInitialState: function() {
        return {
            showCallElement: null,
+            searchFilter: '',
        };
    },

@@ -79,17 +80,22 @@ var LeftPanel = React.createClass({
        if (call) {
            dis.dispatch({
                action: 'view_room',
-                room_id: call.roomId,
+                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";
+        var classes = "mx_LeftPanel mx_fadable";
        if (this.props.collapsed) {
            classes += " collapsed";
        }
@@ -109,12 +115,14 @@ var LeftPanel = React.createClass({
        }

        return (
-            <aside className={classes}>
+            <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>
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -155,20 +155,25 @@ module.exports = React.createClass({
                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
                }
            }
-
        }

-        var classes = "mx_RightPanel";
+        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}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                <div className="mx_RightPanel_header">
                    { buttonGroup }
                </div>
                { panel }
+                <div className="mx_RightPanel_footer">
+                </div>
            </aside>
        );
    }
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -43,6 +43,14 @@ module.exports = React.createClass({
        }
    },

+    componentWillMount: function() {
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 0.3,
+        //     middleOpacity: 0.3,
+        // });
+    },
+
    componentDidMount: function() {
        var self = this;
        MatrixClientPeg.get().publicRooms(function (err, data) {
@@ -65,6 +73,14 @@ module.exports = React.createClass({
        });
    },

+    componentWillUnmount: function() {
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 1.0,
+        //     middleOpacity: 1.0,
+        // });
+    },
+
    showRoom: function(roomId) {
        // extract the metadata from the publicRooms structure to pass
        // as out-of-band data to view_room, because we get information
@@ -79,6 +95,17 @@ module.exports = React.createClass({
        }
        var oob_data = {};
        if (room) {
+            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;
+                }
+            }
+
            oob_data = {
                avatarUrl: room.avatar_url,
                // XXX: This logic is duplicated from the JS SDK which
@@ -102,8 +129,8 @@ module.exports = React.createClass({
        var rooms = this.state.publicRooms.filter(function(a) {
            // FIXME: if incrementally typing, keep narrowing down the search set
            // incrementally rather than starting over each time.
-            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) || 
-                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) && 
+            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
+                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
                      a.num_joined_members > 0);
        }).sort(function(a,b) {
            return a.num_joined_members - b.num_joined_members;
@@ -180,13 +207,14 @@ module.exports = React.createClass({
            );
        }

-        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
        return (
            <div className="mx_RoomDirectory">
-                <RoomHeader simpleHeader="Directory" />
+                <SimpleRoomHeader title="Directory" />
                <div className="mx_RoomDirectory_list">
                    <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
-                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
+                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper"
+                                     relayoutOnUpdate={false} >
                        <table ref="directory_table" className="mx_RoomDirectory_table">
                            <tbody>
                                { this.getRows(this.state.roomAlias) }
@@ -198,4 +226,3 @@ module.exports = React.createClass({
        );
    }
 });
-
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -65,16 +65,12 @@ var RoomSubList = React.createClass({
        selectedRoom: React.PropTypes.string.isRequired,
        startAsHidden: React.PropTypes.bool,
        showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
-
-        // TODO: Fix the name of this. This is too easily confused with the
-        // "hidden" state which is the expanded (or not) view of the list of rooms.
-        // What this prop *really* does is control whether the room name is displayed
-        // so it should be named as such.
-        collapsed: React.PropTypes.bool.isRequired,
+        collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
        onHeaderClick: React.PropTypes.func,
        alwaysShowHeader: React.PropTypes.bool,
        incomingCall: React.PropTypes.object,
-        onShowMoreRooms: React.PropTypes.func
+        onShowMoreRooms: React.PropTypes.func,
+        searchFilter: React.PropTypes.string,
    },

    getInitialState: function() {
@@ -93,13 +89,20 @@ var RoomSubList = React.createClass({
    },

    componentWillMount: function() {
-        this.sortList(this.props.list, this.props.order);
+        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(newProps.list, newProps.order);
+        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
+        });
    },

    onClick: function(ev) {
@@ -278,7 +281,7 @@ var RoomSubList = React.createClass({
        return (
            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
                { this.props.collapsed ? '' : this.props.label }
-                <TintableSvg className="mx_RoomSubList_chevron"
+                <img className="mx_RoomSubList_chevron"
                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
                    width="10" height="10" />
            </h2>
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -0,0 +1,109 @@
+/*
+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 = [
+                    <TintableSvg
+                        key="button"
+                        className="mx_SearchBox_searchButton"
+                        src="img/right_search.svg" width="24" height="24"
+                    />,
+                    <input
+                        key="searchfield"
+                        type="text"
+                        ref="search"
+                        className="mx_SearchBox_search"
+                        value={ this.state.searchTerm }
+                        onChange={ this.onChange }
+                        placeholder="Search room names"
+                    />
+                ];
+        }
+
+        var self = this;
+        return (
+            <div className="mx_SearchBox">
+                { searchControls }
+                { toggleCollapse }
+            </div>
+        );
+    }
+});
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -27,7 +27,19 @@ module.exports = React.createClass({
    displayName: 'ImageView',

    propTypes: {
-        onFinished: React.PropTypes.func.isRequired
+        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
@@ -65,6 +77,14 @@ module.exports = React.createClass({
        });
    },

+    getName: function () {
+        var name = this.props.name;
+        if (name && this.props.link) {
+            name = <a href={ this.props.link } target="_blank">{ name }</a>;
+        }
+        return name;
+    },
+
    render: function() {

 /*
@@ -102,12 +122,36 @@ module.exports = React.createClass({
                width: this.props.width,
                height: this.props.height,
            };
-            res = ", " + style.width + "x" + style.height + "px";
+            res = style.width + "x" + style.height + "px";
        }

        var size;
-        if (this.props.mxEvent.getContent().info && this.props.mxEvent.getContent().info.size) {
-            size = filesize(this.props.mxEvent.getContent().info.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 (
@@ -122,25 +166,16 @@ module.exports = React.createClass({
                            <div className="mx_ImageView_shim">
                            </div>
                            <div className="mx_ImageView_name">
-                                { this.props.mxEvent.getContent().body }
-                            </div>
-                            <div className="mx_ImageView_metadata">
-                                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+                                { this.getName() }
                            </div>
+                            { eventMeta }
                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
                                <div className="mx_ImageView_download">
                                        Download this file<br/>
-                                         <span className="mx_ImageView_size">{ size } { res }</span>
+                                         <span className="mx_ImageView_size">{ size_res }</span>
                                </div>
                            </a>
-                            <div className="mx_ImageView_button">
-                                <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
-                                    View full screen
-                                </a>
-                            </div>
-                            <div className="mx_ImageView_button" onClick={this.onRedactClick}>
-                                Redact
-                            </div>
+                            { eventRedact }
                            <div className="mx_ImageView_shim">
                            </div>
                        </div>
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -33,7 +33,7 @@ module.exports = React.createClass({

        var msgtype = mxEvent.getContent().msgtype;
        if (msgtype && msgtype == 'm.emote') {
-            name = ''; // emote message must include the name so don't duplicate it
+            return <span/>; // emote message must include the name so don't duplicate it
        }
        return (
            <span className="mx_SenderProfile" onClick={this.props.onClick}>
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@@ -27,6 +27,17 @@ var Resend = require("matrix-react-sdk/lib/Resend");
 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();
@@ -66,6 +77,13 @@ module.exports = React.createClass({
        if (this.props.onFinished) this.props.onFinished();
    },

+    onUnhidePreviewClick: function() {
+        if (this.props.eventTileOps) {
+            this.props.eventTileOps.unhideWidget();
+        }
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
    render: function() {
        var eventStatus = this.props.mxEvent.status;
        var resendButton;
@@ -73,6 +91,7 @@ module.exports = React.createClass({
        var redactButton;
        var cancelButton;
        var permalinkButton;
+        var unhidePreviewButton;

        if (eventStatus === 'not_sent') {
            resendButton = (
@@ -104,6 +123,16 @@ module.exports = React.createClass({
            </div>
        );

+        if (this.props.eventTileOps) {
+            if (this.props.eventTileOps.isWidgetHidden()) {
+                unhidePreviewButton = (
+                    <div className="mx_ContextualMenu_field" onClick={this.onUnhidePreviewClick}>
+                        Unhide Preview
+                    </div>
+                )
+            }
+        }
+
        // XXX: this should be https://matrix.to.
        // 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 = (
@@ -119,6 +148,7 @@ module.exports = React.createClass({
                {redactButton}
                {cancelButton}
                {viewSourceButton}
+                {unhidePreviewButton}
                {permalinkButton}
            </div>
        );
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
            });
        }
        else {
-            tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px";
+            tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
            tooltip.style.display = "block";
        }
    },
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -22,174 +22,18 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
 var Modal = require('matrix-react-sdk/lib/Modal');

-/**
- * Enum for state of a push rule as defined by the Vector UI.
- * @readonly
- * @enum {string}
- */
-var PushRuleVectorState = {
-    /** The push rule is disabled */
-    OFF: "off",
-    /** The user will receive push notification for this rule */
-    ON: "on",
-    /** The user will receive push notification for this rule with sound and
-        highlight if this is legitimate */
-    LOUD: "loud",
-};
+var notifications = require('../../../notifications');

-// Encodes a dictionary of {
-//   "notify": true/false,
-//   "sound": string or undefined,
-//   "highlight: true/false,
-// }
-// to a list of push actions.
-function encodeActions(action) {
-    var notify = action.notify;
-    var sound = action.sound;
-    var highlight = action.highlight;
-    if (notify) {
-        var actions = ["notify"];
-        if (sound) {
-            actions.push({"set_tweak": "sound", "value": sound});
-        }
-        if (highlight) {
-            actions.push({"set_tweak": "highlight"});
-        } else {
-            actions.push({"set_tweak": "highlight", "value": false});
-        }
-        return actions;
-    } else {
-        return ["dont_notify"];
-    }
-}
+// TODO: this "view" component still has far to much application logic in it,
+// which should be factored out to other files.

-// Decode a list of actions to a dictionary of {
-//   "notify": true/false,
-//   "sound": string or undefined,
-//   "highlight: true/false,
-// }
-// If the actions couldn't be decoded then returns null.
-function decodeActions(actions) {
-    var notify = false;
-    var sound = null;
-    var highlight = false;
+// TODO: this component also does a lot of direct poking into this.state, which
+// is VERY NAUGHTY.

-    for (var i = 0; i < actions.length; ++i) {
-        var action = actions[i];
-        if (action === "notify") {
-            notify = true;
-        } else if (action === "dont_notify") {
-            notify = false;
-        } else if (typeof action === 'object') {
-            if (action.set_tweak === "sound") {
-                sound = action.value
-            } else if (action.set_tweak === "highlight") {
-                highlight = action.value;
-            } else {
-                // We don't understand this kind of tweak, so give up.
-                return null;
-            }
-        } else {
-            // We don't understand this kind of action, so give up.
-            return null;
-        }
-    }
-
-    if (highlight === undefined) {
-        // If a highlight tweak is missing a value then it defaults to true.
-        highlight = true;
-    }
-
-    var result = {notify: notify, highlight: highlight};
-    if (sound !== null) {
-        result.sound = sound;
-    }
-    return result;
-}
-
-var ACTION_NOTIFY = encodeActions({notify: true});
-var ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({notify: true, sound: "default"});
-var ACTION_NOTIFY_RING_SOUND = encodeActions({notify: true, sound: "ring"});
-var ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({notify: true, sound: "default", highlight: true});
-var ACTION_DONT_NOTIFY = encodeActions({notify: false});
-var ACTION_DISABLED = null;
-
-
-/**
- * The descriptions of rules managed by the Vector UI.
- */
-var VectorPushRulesDefinitions = {
-
-     // Messages containing user's display name
-     // (skip contains_user_name which is too geeky)
-     ".m.rule.contains_display_name": {
-        kind: "underride",
-        description: "Messages containing my name",
-        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
-            on: ACTION_NOTIFY,
-            loud: ACTION_HIGHLIGHT_DEFAULT_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Messages just sent to the user in a 1:1 room
-    ".m.rule.room_one_to_one": {
-        kind: "underride",
-        description: "Messages in one-to-one chats",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY
-        }
-    },
-
-    // Messages just sent to a group chat room
-    // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
-    // By opposition, all other room messages are from group chat rooms.
-    ".m.rule.message": {
-        kind: "underride",
-        description: "Messages in group chats",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY
-        }
-    },
-
-    // Invitation for the user
-    ".m.rule.invite_for_me": {
-        kind: "underride",
-        description: "When I'm invited to a room",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Incoming call
-    ".m.rule.call": {
-        kind: "underride",
-        description: "Call invitation",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_RING_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Notifications from bots
-    ".m.rule.suppress_notices": {
-        kind: "override",
-        description: "Messages sent by bot",
-        vectorStateToActions: {
-            // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
-            on: ACTION_DISABLED,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY,
-        }
-    }
-};
+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.
@@ -206,9 +50,9 @@ var LEGACY_RULES = {
 };

 function portLegacyActions(actions) {
-    var decoded = decodeActions(actions);
+    var decoded = NotificationUtils.decodeActions(actions);
    if (decoded !== null) {
-        return encodeActions(decoded);
+        return NotificationUtils.encodeActions(decoded);
    } else {
        // We don't recognise one of the actions here, so we don't try to
        // canonicalise them.
@@ -216,7 +60,6 @@ function portLegacyActions(actions) {
    }
 }

-
 module.exports = React.createClass({
    displayName: 'Notififications',

@@ -260,6 +103,7 @@ module.exports = React.createClass({
    },

    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];

@@ -330,40 +174,6 @@ module.exports = React.createClass({
        }
    },

-    _actionsFor: function(pushRuleVectorState) {
-        if (pushRuleVectorState === PushRuleVectorState.ON) {
-            return ACTION_NOTIFY;
-        }
-        else if (pushRuleVectorState === PushRuleVectorState.LOUD) {
-            return ACTION_HIGHLIGHT_DEFAULT_SOUND;
-        }
-    },
-
-    // Determine whether a content rule is in the PushRuleVectorState.ON category or in PushRuleVectorState.LOUD
-    // regardless of its enabled state. Returns undefined if it does not match these categories.
-    _contentRuleVectorStateKind: function(rule) {
-        var stateKind;
-
-        // Count tweaks to determine if it is a ON or LOUD rule
-        var tweaks = 0;
-        for (var j in rule.actions) {
-            var action = rule.actions[j];
-            if (action.set_tweak === 'sound' ||
-                (action.set_tweak === 'highlight' &&  action.value)) {
-                tweaks++;
-            }
-        }
-        switch (tweaks) {
-            case 0:
-                stateKind = PushRuleVectorState.ON;
-                break;
-            case 2:
-                stateKind = PushRuleVectorState.LOUD;
-                break;
-        }
-        return stateKind;
-    },
-
    _setPushRuleVectorState: function(rule, newPushRuleVectorState) {
        if (rule && rule.vectorState !== newPushRuleVectorState) {

@@ -379,7 +189,7 @@ module.exports = React.createClass({
            if (rule.rule) {
                var actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];

-                if (actions === ACTION_DISABLED) {
+                if (!actions) {
                    // The new state corresponds to disabling the rule.
                    deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false));
                }
@@ -425,7 +235,7 @@ module.exports = React.createClass({
            switch (newPushRuleVectorState) {
                case PushRuleVectorState.ON:
                    if (rule.actions.length !== 1) {
-                        actions = this._actionsFor(PushRuleVectorState.ON);
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.ON);
                    }

                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
@@ -435,7 +245,7 @@ module.exports = React.createClass({

                case PushRuleVectorState.LOUD:
                    if (rule.actions.length !== 3) {
-                        actions = this._actionsFor(PushRuleVectorState.LOUD);
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.LOUD);
                    }

                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
@@ -521,7 +331,7 @@ module.exports = React.createClass({
                // when creating the new rule.
                // Thus, this new rule will join the 'vectorContentRules' set.
                if (self.state.vectorContentRules.rules.length) {
-                    pushRuleVectorStateKind = self._contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
+                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
                }
                else {
                    // ON is default
@@ -536,13 +346,13 @@ module.exports = React.createClass({
                    if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
                        deferreds.push(cli.addPushRule
                        ('global', 'content', keyword, {
-                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
                           pattern: keyword
                        }));
                    }
                    else {
                        deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
-                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
                           pattern: keyword
                        }));
                    }
@@ -601,7 +411,10 @@ module.exports = React.createClass({

    _refreshFromServer: function() {
        var self = this;
-        MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).done(function(rulesets) {
+        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
@@ -624,8 +437,6 @@ module.exports = React.createClass({

            // HS default rules
            var defaultRules = {master: [], vector: {}, others: []};
-            //  Content/keyword rules
-            var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};

            for (var kind in rulesets.global) {
                for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
@@ -644,84 +455,25 @@ module.exports = React.createClass({
                            defaultRules['others'].push(r);
                        }
                    }
-                    else if (kind === 'content') {
-                        switch (self._contentRuleVectorStateKind(r)) {
-                            case PushRuleVectorState.ON:
-                                if (r.enabled) {
-                                    contentRules.on.push(r);
-                                }
-                                else {
-                                    contentRules.on_but_disabled.push(r);
-                                }
-                                break;
-                            case PushRuleVectorState.LOUD:
-                                if (r.enabled) {
-                                    contentRules.loud.push(r);
-                                }
-                                else {
-                                    contentRules.loud_but_disabled.push(r);
-                                }
-                                break;
-                            default:
-                                contentRules.other.push(r);
-                                break;
-                        }
-                    }
                }
            }

-            // Decide which content rules to display in Vector UI.
-            // Vector displays a single global rule for a list of keywords
-            // whereas Matrix has a push rule per keyword.
-            // Vector can set the unique rule in ON, LOUD or OFF state.
-            // Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
-
-            // The code below determines which set of user's content push rules can be
-            // displayed by the vector UI.
-            // Push rules that does not fit, ie defined by another Matrix client, ends
-            // in self.state.externalContentRules.
-            // There is priority in the determination of which set will be the displayed one.
-            // The set with rules that have LOUD tweaks is the first choice. Then, the ones
-            // with ON tweaks (no tweaks).
-            if (contentRules.loud.length) {
-                self.state.vectorContentRules = {
-                    vectorState: PushRuleVectorState.LOUD,
-                    rules: contentRules.loud
-                }
-               self.state.externalContentRules = [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other);
-            }
-            else if (contentRules.loud_but_disabled.length) {
-                self.state.vectorContentRules = {
-                    vectorState: PushRuleVectorState.OFF,
-                    rules: contentRules.loud_but_disabled
-                }
-               self.state.externalContentRules = [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other);
-            }
-            else if (contentRules.on.length) {
-                self.state.vectorContentRules = {
-                    vectorState: PushRuleVectorState.ON,
-                    rules: contentRules.on
-                }
-                self.state.externalContentRules = [].concat(contentRules.on_but_disabled, contentRules.other);
-            }
-            else if (contentRules.on_but_disabled.length) {
-                self.state.vectorContentRules = {
-                    vectorState: PushRuleVectorState.OFF,
-                    rules: contentRules.on_but_disabled
-                }
-                self.state.externalContentRules = contentRules.other;
-            }
-            else {
-                self.state.externalContentRules = contentRules.other;
-            }
-
            // 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',
@@ -735,7 +487,6 @@ module.exports = React.createClass({
            ];
            for (var i in vectorRuleIds) {
                var vectorRuleId = vectorRuleIds[i];
-                var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];

                if (vectorRuleId === '_keywords') {
                    // keywords needs a special handling
@@ -748,42 +499,12 @@ module.exports = React.createClass({
                    });
                }
                else {
+                    var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
                    var rule = defaultRules.vector[vectorRuleId];

-                    // Translate the rule actions and its enabled value into vector state
-                    var vectorState;
-                    if (rule) {
-                        for (var stateKey in PushRuleVectorState) {
-                            var state = PushRuleVectorState[stateKey];
-                            var vectorStateToActions = ruleDefinition.vectorStateToActions[state];
+                    var vectorState = ruleDefinition.ruleToVectorState(rule);

-                            if (vectorStateToActions === ACTION_DISABLED) {
-                                // No defined actions means that this vector state expects a disabled default hs rule
-                                if (rule.enabled === false) {
-                                    vectorState = state;
-                                    break;
-                                }
-                            }
-                            else {
-                                // The actions must match to the ones expected by vector state
-                                if (JSON.stringify(rule.actions) === JSON.stringify(vectorStateToActions)) {
-                                    // And the rule must be enabled.
-                                    if (rule.enabled === true) {
-                                        vectorState = state;
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-
-                        if (!vectorState) {
-                            console.error("Cannot translate rule actions into Vector rule state. Rule: " + rule);
-                            vectorState = PushRuleVectorState.OFF;
-                        }
-                    }
-                    else {
-                    	vectorState = PushRuleVectorState.OFF;
-                    }
+                    //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);

                    self.state.vectorPushRules.push({
                        "vectorRuleId": vectorRuleId,
@@ -791,6 +512,12 @@ module.exports = React.createClass({
                        "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);
+                    }
                }
            }

@@ -800,7 +527,6 @@ module.exports = React.createClass({
                '.m.rule.fallback': "Notify me for anything else"
            };

-            self.state.externalPushRules = [];
            for (var i in defaultRules.others) {
                var rule = defaultRules.others[i];
                var ruleDescription = otherRulesDescriptions[rule.rule_id];
@@ -811,11 +537,31 @@ module.exports = React.createClass({
                    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) {
@@ -835,7 +581,7 @@ module.exports = React.createClass({

    renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
        return (
-            <tr key = {className}>
+            <tr key={ className }>
                <th>
                    {title}
                </th>
@@ -868,6 +614,7 @@ module.exports = React.createClass({
        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;
@@ -876,13 +623,10 @@ module.exports = React.createClass({
    render: function() {
        var self = this;

+        var spinner;
        if (this.state.phase === this.phases.LOADING) {
            var Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <div className="mx_UserSettings_notifTable">
-                    <Loader />
-                </div>
-            );
+            spinner = <Loader />;
        }

        if (this.state.masterPushRule) {
@@ -936,6 +680,36 @@ module.exports = React.createClass({
            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 device list</div>
+        } else if (this.state.pushers.length == 0) {
+            devicesSection = <div className="mx_UserSettings_devicesTable_nodevices">
+                No devices are receiving push notifications
+            </div>
+        } else {
+            // 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">
+                <thead>
+                    <tr>
+                        <th>Application</th>
+                        <th>Device</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows}
+                </tbody>
+            </table>);
+        }
+
        var advancedSettings;
        if (externalRules.length) {
            advancedSettings = (
@@ -957,6 +731,8 @@ module.exports = React.createClass({

                <div className="mx_UserSettings_notifTable">

+                    { spinner }
+
                    <div className="mx_UserNotifSettings_tableRow">
                        <div className="mx_UserNotifSettings_inputCell">
                            <input id="enableDesktopNotifications"
@@ -999,7 +775,7 @@ module.exports = React.createClass({
                                    <th width="55%"></th>
                                    <th width="15%">Off</th>
                                    <th width="15%">On</th>
-                                    <th width="15%">Loud</th>
+                                    <th width="15%">Highlight<br/>&amp; sound</th>
                                </tr>
                            </thead>
                            <tbody>
@@ -1012,6 +788,9 @@ module.exports = React.createClass({

                    { advancedSettings }

+                    <h3>Devices</h3>
+                    { devicesSection }
+
                </div>

            </div>
--- a/src/notifications/ContentRules.js
+++ b/src/notifications/ContentRules.js
@@ -0,0 +1,125 @@
+/*
+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 PushRuleVectorState = require('./PushRuleVectorState');
+
+module.exports = {
+    /**
+     * Extract the keyword rules from a list of rules, and parse them
+     * into a form which is useful for Vector's UI.
+     *
+     * Returns an object containing:
+     *   rules: the primary list of keyword rules
+     *   vectorState: a PushRuleVectorState indicating whether those rules are
+     *      OFF/ON/LOUD
+     *   externalRules: a list of other keyword rules, with states other than
+     *      vectorState
+     */
+    parseContentRules: function(rulesets) {
+        // first categorise the keyword rules in terms of their actions
+        var contentRules = this._categoriseContentRules(rulesets);
+
+        // Decide which content rules to display in Vector UI.
+        // Vector displays a single global rule for a list of keywords
+        // whereas Matrix has a push rule per keyword.
+        // Vector can set the unique rule in ON, LOUD or OFF state.
+        // Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
+
+        // The code below determines which set of user's content push rules can be
+        // displayed by the vector UI.
+        // Push rules that does not fit, ie defined by another Matrix client, ends
+        // in externalRules.
+        // There is priority in the determination of which set will be the displayed one.
+        // The set with rules that have LOUD tweaks is the first choice. Then, the ones
+        // with ON tweaks (no tweaks).
+
+        if (contentRules.loud.length) {
+            return {
+                vectorState: PushRuleVectorState.LOUD,
+                rules: contentRules.loud,
+                externalRules: [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.loud_but_disabled.length) {
+            return {
+                vectorState: PushRuleVectorState.OFF,
+                rules: contentRules.loud_but_disabled,
+                externalRules: [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.on.length) {
+            return {
+                vectorState: PushRuleVectorState.ON,
+                rules: contentRules.on,
+                externalRules: [].concat(contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.on_but_disabled.length) {
+            return {
+                vectorState: PushRuleVectorState.OFF,
+                rules: contentRules.on_but_disabled,
+                externalRules: contentRules.other,
+            }
+        } else  {
+            return {
+                vectorState: PushRuleVectorState.ON,
+                rules: [],
+                externalRules: contentRules.other,
+            }
+        }
+    },
+
+    _categoriseContentRules: function(rulesets) {
+        var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};
+        for (var kind in rulesets.global) {
+            for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
+                var r = rulesets.global[kind][i];
+
+                // check it's not a default rule
+                if (r.rule_id[0] === '.' || kind !== 'content') {
+                    continue;
+                }
+
+                r.kind = kind; // is this needed? not sure
+
+                switch (PushRuleVectorState.contentRuleVectorStateKind(r)) {
+                    case PushRuleVectorState.ON:
+                        if (r.enabled) {
+                            contentRules.on.push(r);
+                        }
+                        else {
+                            contentRules.on_but_disabled.push(r);
+                        }
+                        break;
+                    case PushRuleVectorState.LOUD:
+                        if (r.enabled) {
+                            contentRules.loud.push(r);
+                        }
+                        else {
+                            contentRules.loud_but_disabled.push(r);
+                        }
+                        break;
+                    default:
+                        contentRules.other.push(r);
+                        break;
+                }
+            }
+        }
+        return contentRules;
+    },
+};
--- a/src/notifications/NotificationUtils.js
+++ b/src/notifications/NotificationUtils.js
@@ -0,0 +1,89 @@
+/*
+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';
+
+module.exports = {
+    // Encodes a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // to a list of push actions.
+    encodeActions: function(action) {
+        var notify = action.notify;
+        var sound = action.sound;
+        var highlight = action.highlight;
+        if (notify) {
+            var actions = ["notify"];
+            if (sound) {
+                actions.push({"set_tweak": "sound", "value": sound});
+            }
+            if (highlight) {
+                actions.push({"set_tweak": "highlight"});
+            } else {
+                actions.push({"set_tweak": "highlight", "value": false});
+            }
+            return actions;
+        } else {
+            return ["dont_notify"];
+        }
+    },
+
+    // Decode a list of actions to a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // If the actions couldn't be decoded then returns null.
+    decodeActions: function(actions) {
+        var notify = false;
+        var sound = null;
+        var highlight = false;
+
+        for (var i = 0; i < actions.length; ++i) {
+            var action = actions[i];
+            if (action === "notify") {
+                notify = true;
+            } else if (action === "dont_notify") {
+                notify = false;
+            } else if (typeof action === 'object') {
+                if (action.set_tweak === "sound") {
+                    sound = action.value
+                } else if (action.set_tweak === "highlight") {
+                    highlight = action.value;
+                } else {
+                    // We don't understand this kind of tweak, so give up.
+                    return null;
+                }
+            } else {
+                // We don't understand this kind of action, so give up.
+                return null;
+            }
+        }
+
+        if (highlight === undefined) {
+            // If a highlight tweak is missing a value then it defaults to true.
+            highlight = true;
+        }
+
+        var result = {notify: notify, highlight: highlight};
+        if (sound !== null) {
+            result.sound = sound;
+        }
+        return result;
+    },
+};
--- a/src/notifications/PushRuleVectorState.js
+++ b/src/notifications/PushRuleVectorState.js
@@ -0,0 +1,94 @@
+/*
+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 StandardActions = require('./StandardActions');
+var NotificationUtils = require('./NotificationUtils');
+
+var states = {
+    /** The push rule is disabled */
+    OFF: "off",
+
+    /** The user will receive push notification for this rule */
+    ON: "on",
+
+    /** The user will receive push notification for this rule with sound and
+        highlight if this is legitimate */
+    LOUD: "loud",
+};
+
+
+module.exports = {
+    /**
+     * Enum for state of a push rule as defined by the Vector UI.
+     * @readonly
+     * @enum {string}
+     */
+    states: states,
+
+    /**
+     * Convert a PushRuleVectorState to a list of actions
+     *
+     * @return [object] list of push-rule actions
+     */
+    actionsFor: function(pushRuleVectorState) {
+        if (pushRuleVectorState === this.ON) {
+            return StandardActions.ACTION_NOTIFY;
+        }
+        else if (pushRuleVectorState === this.LOUD) {
+            return StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND;
+        }
+    },
+
+    /**
+     * Convert a pushrule's actions to a PushRuleVectorState.
+     *
+     * Determines whether a content rule is in the PushRuleVectorState.ON
+     * category or in PushRuleVectorState.LOUD, regardless of its enabled
+     * state. Returns null if it does not match these categories.
+     */
+    contentRuleVectorStateKind: function(rule) {
+        var decoded = NotificationUtils.decodeActions(rule.actions);
+
+        if (!decoded) {
+            return null;
+        }
+
+        // Count tweaks to determine if it is a ON or LOUD rule
+        var tweaks = 0;
+        if (decoded.sound) {
+            tweaks++;
+        }
+        if (decoded.highlight) {
+            tweaks++;
+        }
+        var stateKind = null;
+        switch (tweaks) {
+            case 0:
+                stateKind = this.ON;
+                break;
+            case 2:
+                stateKind = this.LOUD;
+                break;
+        }
+        return stateKind;
+    },
+};
+
+for (var k in states) {
+    module.exports[k] = states[k];
+};
--- a/src/notifications/StandardActions.js
+++ b/src/notifications/StandardActions.js
@@ -0,0 +1,30 @@
+/*
+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 NotificationUtils = require('./NotificationUtils');
+
+var encodeActions = NotificationUtils.encodeActions;
+
+module.exports = {
+    ACTION_NOTIFY: encodeActions({notify: true}),
+    ACTION_NOTIFY_DEFAULT_SOUND: encodeActions({notify: true, sound: "default"}),
+    ACTION_NOTIFY_RING_SOUND: encodeActions({notify: true, sound: "ring"}),
+    ACTION_HIGHLIGHT_DEFAULT_SOUND: encodeActions({notify: true, sound: "default", highlight: true}),
+    ACTION_DONT_NOTIFY: encodeActions({notify: false}),
+    ACTION_DISABLED: null,
+};
--- a/src/notifications/VectorPushRulesDefinitions.js
+++ b/src/notifications/VectorPushRulesDefinitions.js
@@ -0,0 +1,134 @@
+/*
+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 StandardActions = require('./StandardActions');
+var PushRuleVectorState = require('./PushRuleVectorState');
+
+class VectorPushRuleDefinition {
+    constructor(opts) {
+        this.kind = opts.kind;
+        this.description = opts.description;
+        this.vectorStateToActions = opts.vectorStateToActions;
+    }
+
+    // Translate the rule actions and its enabled value into vector state
+    ruleToVectorState(rule) {
+        var enabled = false;
+        var actions = null;
+        if (rule) {
+            enabled = rule.enabled;
+            actions = rule.actions;
+        }
+
+        for (var stateKey in PushRuleVectorState.states) {
+            var state = PushRuleVectorState.states[stateKey];
+            var vectorStateToActions = this.vectorStateToActions[state];
+
+            if (!vectorStateToActions) {
+                // No defined actions means that this vector state expects a disabled (or absent) rule
+                if (!enabled) {
+                    return state;
+                }
+            } else {
+                // The actions must match to the ones expected by vector state
+                if (enabled && JSON.stringify(rule.actions) === JSON.stringify(vectorStateToActions)) {
+                    return state;
+                }
+            }
+        }
+
+        console.error("Cannot translate rule actions into Vector rule state. Rule: " +
+                      JSON.stringify(rule));
+        return undefined;
+    }
+};
+
+/**
+ * The descriptions of rules managed by the Vector UI.
+ */
+module.exports = {
+    // Messages containing user's display name
+    // (skip contains_user_name which is too geeky)
+    ".m.rule.contains_display_name": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Messages containing my name",
+        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Messages just sent to the user in a 1:1 room
+    ".m.rule.room_one_to_one": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Messages in one-to-one chats",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY
+        }
+    }),
+
+    // Messages just sent to a group chat room
+    // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
+    // By opposition, all other room messages are from group chat rooms.
+    ".m.rule.message": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Messages in group chats",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY
+        }
+    }),
+
+    // Invitation for the user
+    ".m.rule.invite_for_me": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "When I'm invited to a room",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Incoming call
+    ".m.rule.call": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Call invitation",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_RING_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Notifications from bots
+    ".m.rule.suppress_notices": new VectorPushRuleDefinition({
+        kind: "override",
+        description: "Messages sent by bot",
+        vectorStateToActions: {
+            // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
+            on: StandardActions.ACTION_DISABLED,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY,
+        }
+    }),
+};
--- a/src/notifications/index.js
+++ b/src/notifications/index.js
@@ -0,0 +1,24 @@
+/*
+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';
+
+module.exports = {
+    NotificationUtils: require('./NotificationUtils'),
+    PushRuleVectorState: require('./PushRuleVectorState'),
+    VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'),
+    ContentRules: require('./ContentRules'),
+};
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
    box-shadow: none;
 }

+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -ms-transition: opacity 0.2s ease-in-out;
+    -o-transition: opacity 0.2s ease-in-out;
+}
+
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
   Stop the scrollbar view from pushing out the container's overall sizing, which causes
   flexbox to adapt to the new size and cause the view to keep growing.
@@ -214,3 +223,8 @@ input[type=text]:focus, textarea:focus {
    color: #454545;
    background-color: #fff;
 }
+
+.emojione {
+    height: 1em;
+    vertical-align: middle;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
@@ -1,7 +1,23 @@
+/*
+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.
+*/
+
 .mx_RoomStatusBar {
-    margin-top: 5px;
+    margin-top: 15px;
    margin-left: 65px;
-    min-height: 24px;
+    min-height: 34px;
 }

 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
@@ -14,9 +30,39 @@
    text-align: center;
 }

-.mx_RoomStatusBar_placeholderIndicator {
+.mx_RoomStatusBar_placeholderIndicator span {
    color: #4a4a4a;
    opacity: 0.5;
+    position: relative;
+    top: -4px;
+/*    
+    animation-duration: 1s;
+    animation-name: bounce;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+*/    
+}
+
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
+    animation-delay: 0.3s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
+    animation-delay: 0.6s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
+    animation-delay: 0.9s;
+}
+
+@keyframes bounce {
+    from {
+        opacity: 0.5;
+        top: 0;
+    }
+
+    to {
+        opacity: 0.2;
+        top: -3px;
+    }
 }

 .mx_RoomStatusBar_scrollDownIndicator {
@@ -70,7 +116,7 @@
 .mx_RoomStatusBar_tabCompleteWrapper {
    display: flex;
    display: -webkit-flex;
-    height: 24px;
+    height: 26px;
 }

 .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -36,8 +36,8 @@ limitations under the License.
    -webkit-order: 1;
    order: 1;

-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }

 .mx_RoomView_fileDropTarget {
@@ -64,7 +64,7 @@ limitations under the License.
    border: 2px #e1dddd solid;
    border-bottom: none;
    position: absolute;
-    top: 83px;
+    top: 70px;
    bottom: 0px;
    z-index: 3000;
 }
@@ -89,7 +89,7 @@ limitations under the License.
    margin: auto;

    overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;

    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
@@ -158,7 +158,7 @@ limitations under the License.
    margin-bottom: 8px;
    margin-left: 63px;
    padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;
 }

 .mx_RoomView_invitePrompt {
@@ -207,11 +207,12 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_statusAreaBox {
    max-width: 960px;
    margin: auto;
-    min-height: 36px;
+    min-height: 60px;
 }

 .mx_RoomView_statusAreaBox_line {
-    border-top: 1px solid #eee;
+    margin-left: 65px;
+    border-top: 1px solid #e5e5e5;
    height: 1px;
 }

--- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
@@ -0,0 +1,63 @@
+/*
+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.
+*/
+
+.mx_SearchBox {
+    height: 24px;
+    margin-left: 16px;
+    margin-right: 20px;
+    padding-top: 24px;
+    padding-bottom: 22px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    display: flex;
+    display: -webkit-flex;
+}
+
+.mx_SearchBox_searchButton {
+    margin-right: 10px;
+}
+
+.mx_SearchBox_search {
+    flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+    width: 0px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    font-size: 12px;
+    margin-top: -2px;
+    height: 24px;
+    border: 0px ! important;
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
+    background-color: transparent;
+    border: 0px;
+}
+
+.mx_SearchBox_minimise,
+.mx_SearchBox_maximise {
+    margin-top: 3px;
+    cursor: pointer;
+}
+
+.mx_SearchBox_minimise {
+    margin-left: 10px;
+}
+
+.mx_SearchBox_maximise {
+    margin-left: 9px;
+}
+
+.mx_SearchBox object {
+    pointer-events: none;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
@@ -1,16 +1,33 @@
+/*
+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.
+*/
+
 .mx_UploadBar {
    position: relative;
 }

 .mx_UploadBar_uploadProgressOuter {
-    height: 4px;
+    height: 5px;
    margin-left: 63px;
    margin-top: -1px;
+    padding-bottom: 5px;
 }

 .mx_UploadBar_uploadProgressInner {
    background-color: #76cfa6;
-    height: 4px;
+    height: 5px;
 }

 .mx_UploadBar_uploadFilename {
@@ -22,7 +39,7 @@

 .mx_UploadBar_uploadIcon {
    float: left;
-    margin-top: 1px;
+    margin-top: 5px;
    margin-left: 14px;
 }

--- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
@@ -36,8 +36,8 @@ limitations under the License.
    -webkit-order: 1;
    order: 1;

-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }

 .mx_UserSettings_body {
@@ -50,9 +50,25 @@ limitations under the License.
    -webkit-flex: 1 1 0;
    flex: 1 1 0;

+    margin-top: -20px;
    overflow-y: auto;
 }

+.mx_UserSettings h3 {
+    clear: both;
+    margin-left: 63px;
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 26px;
+    margin-bottom: 10px;
+}
+
+.mx_UserSettings_section h3 {
+    margin-left: 0px;
+}
+
 .mx_UserSettings_spinner {
    display: inline-block;
    vertical-align: middle;
@@ -78,22 +94,6 @@ limitations under the License.
    cursor: pointer;
 }

-.mx_UserSettings h2 {
-    clear: both;
-    margin-top: 32px;
-    margin-bottom: 8px;
-    margin-left: 63px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
-}
-
-.mx_UserSettings h3 {
-    font-weight: bold;
-    font-size: 15px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-}
-
 .mx_UserSettings_section {
    margin-left: 63px;
    margin-top: 28px;
@@ -106,6 +106,10 @@ limitations under the License.
    display: table;
 }

+.mx_UserSettings_notifTable .mx_Spinner {
+    position: absolute;
+}
+
 .mx_UserSettings_profileTable
 {
    display: table;
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_MImageBody {
+    display: block;
+}
+
 .mx_MImageBody_thumbnail {
    max-width: 100%;
 /*
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@@ -39,9 +39,8 @@ limitations under the License.
 .mx_EventTile .mx_SenderProfile {
    color: #454545;
    opacity: 0.5;
+    display: inline-block;
    font-size: 13px;
-    margin-bottom: 4px;
-    display: block;
    overflow-y: hidden;
    cursor: pointer;
 }
@@ -159,10 +158,15 @@ limitations under the License.
    margin-right: 10px;
 }

+.mx_EventTile_msgOption a {
+    text-decoration: none;
+}
+
 .mx_EventTile .mx_MessageTimestamp {
    display: block;
    visibility: hidden;
    text-align: right;
+    white-space: nowrap;
 }

 .mx_EventTile_last .mx_MessageTimestamp {
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
@@ -0,0 +1,62 @@
+/*
+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.
+*/
+
+.mx_LinkPreviewWidget {
+    margin-top: 15px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    display: -webkit-flex;
+    display: flex;
+    border-left: 4px solid #ddd;
+    color: #888;
+}
+
+.mx_LinkPreviewWidget_image {
+    -webkit-flex: 0 0 100px;
+    flex: 0 0 100px;
+    margin-left: 15px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.mx_LinkPreviewWidget_caption {
+    margin-left: 15px;
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+.mx_LinkPreviewWidget_title {
+    display: inline;
+    font-weight: bold;
+}
+
+.mx_LinkPreviewWidget_siteName {
+    display: inline;
+}
+
+.mx_LinkPreviewWidget_description {
+    margin-top: 8px;
+    white-space: normal;
+}
+
+.mx_LinkPreviewWidget_cancel {
+    visibility: hidden;
+    cursor: pointer;
+}
+
+.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
+    visibility: visible;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -15,6 +15,7 @@ limitations under the License.
 */

 .mx_MemberInfo {
+    margin-top: 20px;
    height: 100%;
 }

@@ -32,6 +33,14 @@ limitations under the License.
    clear: both;
 }

+.mx_MemberInfo_avatar .mx_BaseAvatar {
+    cursor: not-allowed;
+}
+
+.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+    cursor: pointer;
+}
+
 .mx_MemberInfo_profile {
    margin-bottom: 16px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
@@ -17,6 +17,8 @@ limitations under the License.
 .mx_MemberList {
    height: 100%;

+    margin-top: 12px;
+
    -webkit-flex: 1;
    flex: 1;

@@ -77,17 +79,6 @@ limitations under the License.
 }
 */

-.mx_MemberList_bottom {
-    order: 4;
-    flex: 0 0 72px;
-    -webkit-flex: 0 0 72px;
-}
-
-.mx_MemberList_bottomRule {
-    border-top: 2px solid #e1dddd;
-    margin-right: 15px;
-}
-
 .mx_MemberList_invited h2 {
    text-transform: uppercase;
    color: #3d3b39;
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -18,7 +18,7 @@ limitations under the License.
    max-width: 960px;
    vertical-align: middle;
    margin: auto;
-    border-top: 2px solid #e1dddd;
+    border-top: 1px solid #e5e5e5;
 }

 .mx_MessageComposer_row {
@@ -37,11 +37,25 @@ limitations under the License.
    display: block;
 }

+.mx_MessageComposer_composecontrols {
+    width: 100%;
+}
+
+.mx_MessageComposer_noperm_error {
+    display: table-cell;
+    width: 100%;
+    vertical-align: middle;
+    height: 60px;
+    text-align: center;
+    font-style: italic;
+    color: #888;
+}
+
 .mx_MessageComposer_input {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
-    height: 70px;
+    height: 60px;
 }

 .mx_MessageComposer_input textarea {
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
@@ -23,8 +23,7 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
    max-width: 960px;
    margin: auto;
-    height: 83px;
-    border-bottom: 1px solid #eeeeee;
+    height: 70px;

    -webkit-align-items: center;
    align-items: center;
@@ -36,10 +35,6 @@ limitations under the License.
    display: flex;
 }

-.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
-    border-bottom: 1px solid transparent;
-}
-
 .mx_RoomHeader_leftRow {
    margin-left: -2px;

@@ -53,6 +48,19 @@ limitations under the License.
    flex: 1;
 }

+.mx_RoomHeader_spinner {
+    height: 36px;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
 .mx_RoomHeader_textButton {
    height: 36px;
    background-color: #76cfa6;
@@ -110,7 +118,7 @@ limitations under the License.
 }

 .mx_RoomHeader_simpleHeader {
-    line-height: 83px;
+    line-height: 70px;
    color: #454545;
    font-size: 22px;
    font-weight: bold;
@@ -120,11 +128,8 @@ limitations under the License.
    width: 100%;
 }

-.mx_RoomHeader_simpleHeaderCancel {
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
    float: right;
-    margin-top: 8px;
-    padding: 24px;
-    cursor: pointer;
 }

 .mx_RoomHeader_name {
@@ -202,8 +207,9 @@ limitations under the License.
    vertical-align: bottom;
    float: left;
    max-height: 42px;
-    color: #454545;
+    color: #A2A2A2;
    font-weight: 300;
+    font-size: 13px;
    margin-left: 19px;
    margin-right: 16px;
    overflow: hidden;
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -15,7 +15,7 @@ limitations under the License.
 */

 .mx_RoomList {
-    padding-top: 24px;
+    padding-top: 8px;
    padding-bottom: 12px;
    min-height: 400px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -23,10 +23,10 @@ limitations under the License.

 .mx_RoomTile_avatar {
    display: table-cell;
-    padding-right: 8px;
+    padding-right: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
-    padding-left: 18px;
+    padding-left: 20px;
    width: 24px;
    height: 24px;
    position: relative;
@@ -38,8 +38,8 @@ limitations under the License.
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 16px;
+    word-break: break-word;
+    padding-right: 19px;
    color: rgba(69, 69, 69, 0.8);
 }

@@ -98,11 +98,13 @@ limitations under the License.

 .mx_RoomTile_badge {
    background-color: #ff0064;
-    width: 4px;
+    width: 8px;
+    height: 8px;
    position: absolute;
-    left: 0px;
-    top: 5px;
-    bottom: 5px;
+    left: 7px;
+    top: 50%;
+    margin-top: -4px;
+    border-radius: 4px;
 }

 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -119,18 +121,35 @@ limitations under the License.
 }

 .mx_RoomTile_selected .mx_RoomTile_name {
-    color: #76cfa6 ! important;
+    padding-right: 23px;
 }

 .mx_RoomTile_highlight .mx_RoomTile_name {
    color: #ff0064 ! important;
 }

+.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
+    padding-right: 7px;
+}
+
+.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    padding: 4px;
+    margin-top: -4px;
+    margin-bottom: -4px;
+    border-radius: 2px;
+    background-color: rgba(118,207,166,0.2);
+}
+
+/*
 .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
    background: url('img/selected.png');
    background-repeat: no-repeat;
    background-position: right center;
 }
+*/

 .mx_RoomTile_arrow {
    position: absolute;
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
@@ -21,6 +21,7 @@ limitations under the License.
 .mx_TabCompleteBar_item {
    display: inline-block;
    margin-right: 15px;
+    margin-bottom: 2px;
    cursor: pointer;
 }

@@ -37,6 +38,7 @@ limitations under the License.

 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
    opacity: 1.0;
+    vertical-align: initial;
    color: #fff;
 }

@@ -47,5 +49,6 @@ limitations under the License.

 .mx_TabCompleteBar_text {
    color: #4a4a4a;
+    vertical-align: middle;
    opacity: 0.5;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
@@ -19,7 +19,7 @@ limitations under the License.
    max-width: 960px;
    padding-top: 5px;
    padding-bottom: 5px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;
 }

 .mx_TopUnreadMessagesBar_scrollUp {
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -58,23 +58,40 @@ limitations under the License.
    -webkit-order: 3;
    order: 3;

-    -webkit-flex: 0 0 140px;
-    flex: 0 0 140px;
-
-    background-color: rgba(118,207,166,0.2);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-left: 20px;
+    margin-right: 20px;
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;
 }

-.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
-    color: #454545;
+.mx_LeftPanel .mx_BottomLeftMenu_options {
+    margin-top: 18px;
 }

-.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
-    margin-top: 15px;
-    width: 100%;
+.mx_BottomLeftMenu_options object {
+    pointer-events: none;
 }

-.mx_LeftPanel .mx_BottomLeftMenu img {
-    border-radius: 0px;
-    background-color: transparent;
-    vertical-align: middle;
-}
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_settings {
+    margin-left: 0px ! important;
+    padding-top: 3px ! important;
+    padding-bottom: 3px ! important;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_directory {
+    margin-left: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    float: right;
+}
--- a/src/skins/vector/css/vector-web/structures/RightPanel.css
+++ b/src/skins/vector/css/vector-web/structures/RightPanel.css
@@ -33,14 +33,17 @@ limitations under the License.
    -webkit-order: 1;
    order: 1;

-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    border-bottom: 1px solid #e5e5e5;
+    margin-right: 20px;
+
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }

 /** Fixme - factor this out with the main header **/

 .mx_RightPanel_headerButtonGroup {
-    margin-top: 32px;
+    margin-top: 25px;
    float: left;
    background-color: #fff;
    margin-left: -4px;
@@ -83,10 +86,27 @@ limitations under the License.
 }

 .mx_RightPanel .mx_MemberList,
-.mx_RightPanel .mx_MemberInfo {
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel_blank {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
+    flex: 1;
+    -webkit-flex: 1;
+}
+
+.mx_RightPanel_footer {
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -ms-flex-order: 3;
+    -webkit-order: 3;
+    order: 3;
+
+    border-top: 1px solid #e5e5e5;
+    margin-right: 20px;
+
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;
 }
--- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css
+++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css
@@ -22,6 +22,8 @@ limitations under the License.
    margin-bottom: 12px;
    color: #4a4a4a;

+    border-top: 1px solid #c5c5c5;
+
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -29,13 +29,14 @@ limitations under the License.
    padding-right: 12px;
    margin-top: 8px;
    margin-bottom: 4px;
+    cursor: pointer;
 }

 .mx_RoomSubList_chevron {
-    padding-left: 5px;
+    padding-left: 4px;
    pointer-events: none;
 }

 .collapsed .mx_RoomSubList_chevron  {
-    padding-left: 13px;
+    padding-left: 12px;
 }
--- a/src/skins/vector/css/vector-web/structures/ViewSource.css
+++ b/src/skins/vector/css/vector-web/structures/ViewSource.css
@@ -19,4 +19,5 @@ limitations under the License.
    font-size: 12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
+    white-space: pre-wrap;
 }
--- a/src/skins/vector/css/vector-web/views/elements/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css
@@ -82,9 +82,10 @@ limitations under the License.
    -webkit-justify-content: center;
    flex-direction: column;
    -webkit-flex-direction: column;
-    padding-left: 60px;
-    padding-right: 60px;
+    padding-left: 30px;
+    padding-right: 30px;
    min-height: 100%;
+    max-width: 240px;
    color: #fff;
 }

@@ -99,6 +100,7 @@ limitations under the License.
 .mx_ImageView_name {
    font-size: 18px;
    margin-bottom: 6px;
+    word-wrap: break-word;
 }

 .mx_ImageView_metadata {
--- a/src/skins/vector/css/vector-web/views/settings/Notifications.css
+++ b/src/skins/vector/css/vector-web/views/settings/Notifications.css
@@ -60,3 +60,11 @@ limitations under the License.
    cursor: pointer;
    color: #76cfa6;
 }
+
+.mx_UserSettings_devicesTable td {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.mx_UserSettings_devicesTable_nodevices {
+    font-style: italic;
+}
--- a/src/skins/vector/img/icons-create-room.svg
+++ b/src/skins/vector/img/icons-create-room.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_create_room</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-20.000000, -726.000000)">
+            <g id="Room-list" sketch:type="MSLayerGroup">
+                <g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
+                    <g id="icons_create_room" transform="translate(20.000000, 18.000000)">
+                        <circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
+                        <path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                        <path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/icons-directory.svg
+++ b/src/skins/vector/img/icons-directory.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_directory</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-54.000000, -726.000000)">
+            <g id="Room-list" sketch:type="MSLayerGroup">
+                <g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
+                    <g id="icons_directory" transform="translate(54.000000, 18.000000)">
+                        <ellipse id="Oval-1-Copy-7" fill="#76CFA6" cx="12.48" cy="12" rx="11.52" ry="12"></ellipse>
+                        <path d="M10.919715,8.29307518 C10.8407601,8.29307518 10.7883135,8.12984737 10.7170546,7.88143019 C10.616152,7.53041266 10.4645131,7 9.9312114,7 L7.38327791,7 C7.02270784,7 6.73168646,7.30842284 6.72057007,7.70887507 L6.72,17.2758903 C6.72,17.6754098 7.01786223,18 7.38327791,18 L17.5770071,18 C17.9424228,18 18.24,17.6754098 18.24,17.2758903 L18.24,9.01687394 C18.24,8.61766535 17.9424228,8.29307518 17.5770071,8.29307518 L10.919715,8.29307518 Z M17.28,16.7470688 C17.28,16.8865013 17.1755713,17 17.0471522,17 L6.95341227,17 C6.82499318,17 6.72,16.8865013 6.72,16.7470688 L6.72056448,10 L17.28,10 L17.28,16.7470688 L17.28,16.7470688 Z M17.28,9 L6.72,9 L6.72,7.20209147 C6.72395157,7.0886985 6.82641007,7 6.95286024,7 L9.47593617,7 C9.67210328,7 9.74040895,7.13682752 9.84964157,7.44903616 C9.93826959,7.70177649 10.0596392,8.04800302 10.4547959,8.04800302 L17.0471398,8.04800302 C17.1755657,8.04800302 17.28,8.14148923 17.28,8.25664609 L17.28,9 L17.28,9 Z" id="Fill-137"></path>
+                        <path d="M18,17 C18,16.8865013 17.8912201,17 18,17 L7,17 C7.1093679,17 7,16.8865013 7,17 L7,10 L18,10 L18,17 L18,17 Z" id="Path-Copy-2" fill="#FFFFFF"></path>
+                        <path d="M7,9 L7,7 C7.00411622,7.0886985 7.11084382,7 7,7 L10,7 C10.0751076,7 10.1462593,7.13682752 10,7 C10.3523642,7.70177649 10.4787908,8.04800302 11,8 L18,8 C17.8912143,8.04800302 18,8.14148923 18,8 L18,9 L7,9 Z" id="Path-Copy" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/icons-settings.svg
+++ b/src/skins/vector/img/icons-settings.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_settings</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="09-Invitations-and-joining" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="09_1-Invite-members" sketch:type="MSArtboardGroup" transform="translate(-886.000000, -25.000000)">
+            <g id="Room-header" sketch:type="MSLayerGroup" transform="translate(210.000000, 0.000000)">
+                <g id="icons_settings" transform="translate(676.000000, 25.000000)" sketch:type="MSShapeGroup">
+                    <circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
+                    <path d="M15,12 C15,11.1718709 14.7070342,10.4648467 14.1210938,9.87890625 C13.5351533,9.29296582 12.8281291,9 12,9 C11.1718709,9 10.4648467,9.29296582 9.87890625,9.87890625 C9.29296582,10.4648467 9,11.1718709 9,12 C9,12.8281291 9.29296582,13.5351533 9.87890625,14.1210938 C10.4648467,14.7070342 11.1718709,15 12,15 C12.8281291,15 13.5351533,14.7070342 14.1210938,14.1210938 C14.7070342,13.5351533 15,12.8281291 15,12 L15,12 Z M19,11.0065104 L19,13.0299479 C19,13.1028649 18.9756947,13.1727427 18.9270833,13.2395833 C18.878472,13.3064239 18.8177087,13.3459201 18.7447917,13.3580729 L17.0585938,13.6132812 C16.9431418,13.9414079 16.8246534,14.2178808 16.703125,14.4427083 C16.9157997,14.7465293 17.2408832,15.1657959 17.6783854,15.7005208 C17.7391496,15.7734379 17.7695312,15.849392 17.7695312,15.9283854 C17.7695312,16.0073789 17.7421878,16.0772566 17.6875,16.1380208 C17.5234367,16.3628483 17.2226584,16.6909701 16.7851562,17.1223958 C16.3476541,17.5538216 16.0620666,17.7695312 15.9283854,17.7695312 C15.8554684,17.7695312 15.7764761,17.7421878 15.6914062,17.6875 L14.4335938,16.703125 C14.1662313,16.8428826 13.8897584,16.9583329 13.6041667,17.0494792 C13.506944,17.8758722 13.4188372,18.4409707 13.3398438,18.7447917 C13.2973088,18.9149314 13.1879349,19 13.0117188,19 L10.9882812,19 C10.9032114,19 10.8287764,18.9741756 10.764974,18.922526 C10.7011716,18.8708765 10.6662327,18.805556 10.6601562,18.7265625 L10.4049479,17.0494792 C10.1072034,16.9522565 9.83376861,16.8398444 9.58463542,16.7122396 L8.29947917,17.6875 C8.23871497,17.7421878 8.16276087,17.7695312 8.07161458,17.7695312 C7.98654471,17.7695312 7.91059061,17.7361114 7.84375,17.6692708 C7.07812117,16.976559 6.5768241,16.4661475 6.33984375,16.1380208 C6.29730882,16.0772566 6.27604167,16.0073789 6.27604167,15.9283854 C6.27604167,15.8554684 6.30034698,15.7855906 6.34895833,15.71875 C6.44010462,15.5911452 6.59505099,15.3891073 6.81380208,15.1126302 C7.03255318,14.8361531 7.19661404,14.6219626 7.30598958,14.4700521 C7.14192626,14.1662311 7.01736154,13.8654529 6.93229167,13.5677083 L5.26432292,13.3216146 C5.18532947,13.3094617 5.12152802,13.2714847 5.07291667,13.2076823 C5.02430531,13.1438799 5,13.072483 5,12.9934896 L5,10.9700521 C5,10.8971351 5.02430531,10.8272573 5.07291667,10.7604167 C5.12152802,10.6935761 5.17925314,10.6540799 5.24609375,10.6419271 L6.94140625,10.3867188 C7.02647612,10.1072035 7.14496452,9.82769237 7.296875,9.54817708 C7.05381823,9.20182118 6.72873467,8.78255454 6.32161458,8.29036458 C6.26085039,8.21744755 6.23046875,8.14453161 6.23046875,8.07161458 C6.23046875,8.01085039 6.25781223,7.94097262 6.3125,7.86197917 C6.4704869,7.64322807 6.76974606,7.31662544 7.21028646,6.88216146 C7.65082686,6.44769748 7.93793336,6.23046875 8.07161458,6.23046875 C8.15060803,6.23046875 8.2296003,6.26085039 8.30859375,6.32161458 L9.56640625,7.296875 C9.8337687,7.15711736 10.1102416,7.04166712 10.3958333,6.95052083 C10.493056,6.12412781 10.5811628,5.5590293 10.6601562,5.25520833 C10.7026912,5.08506859 10.8120651,5 10.9882812,5 L13.0117188,5 C13.0967886,5 13.1712236,5.02582439 13.235026,5.07747396 C13.2988284,5.12912352 13.3337673,5.19444405 13.3398438,5.2734375 L13.5950521,6.95052083 C13.8927966,7.04774354 14.1662314,7.16015561 14.4153646,7.28776042 L15.7096354,6.3125 C15.7643232,6.25781223 15.8372391,6.23046875 15.9283854,6.23046875 C16.0073789,6.23046875 16.083333,6.26085039 16.15625,6.32161458 C16.9401081,7.04470848 17.4414052,7.56119637 17.6601562,7.87109375 C17.7026912,7.9197051 17.7239583,7.98654471 17.7239583,8.07161458 C17.7239583,8.14453161 17.699653,8.21440939 17.6510417,8.28125 C17.5598954,8.4088548 17.404949,8.61089271 17.1861979,8.88736979 C16.9674468,9.16384687 16.803386,9.37803743 16.6940104,9.52994792 C16.8519973,9.83376888 16.976562,10.131509 17.0677083,10.4231771 L18.7356771,10.6783854 C18.8146705,10.6905383 18.878472,10.7285153 18.9270833,10.7923177 C18.9756947,10.8561201 19,10.927517 19,11.0065104 L19,11.0065104 Z" id="icons_settings-copy" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/list-close.svg
+++ b/src/skins/vector/img/list-close.svg
@@ -1,10 +1,15 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
-    <title>Slice 1</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000) "></path>
-    </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
+	 style="enable-background:new -249 251 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:#444444;}
+</style>
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1" sketch:type="MSPage" class="st0">
+	<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-245,270v-18l12,9L-245,270z"/>
+</g>
+</svg>
--- a/src/skins/vector/img/list-open.svg
+++ b/src/skins/vector/img/list-open.svg
@@ -1,10 +1,15 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
-    <title>Slice 1</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
-    </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
+	 style="enable-background:new -249 251 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:#444444;}
+</style>
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1" sketch:type="MSPage" class="st0">
+	<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-248,255h18l-9,12L-248,255z"/>
+</g>
+</svg>
--- a/src/skins/vector/img/maximise.svg
+++ b/src/skins/vector/img/maximise.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-254 253 10 16"
+	 style="enable-background:new -254 253 10 16;" xml:space="preserve">
+<title>minimise</title>
+<desc>Created with sketchtool.</desc>
+<g id="_x30_2-Chat" sketch:type="MSPage">
+	<g id="_x30_2_x5F_1-Chat-collapsed-w-topic" transform="translate(-176.000000, -27.000000)" sketch:type="MSArtboardGroup">
+		<g id="Room-list" sketch:type="MSLayerGroup">
+			<g id="Room-list_x2F_Header" sketch:type="MSShapeGroup">
+				<g id="minimise" transform="translate(172.000000, 25.000000)">
+					<path id="Path-53-Copy" fill="none" stroke-width="2" stroke="#76CFA6" d="M-248.7,256.3l5.7,5.7l-5.7,5.7"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
--- a/src/skins/vector/img/minimise.svg
+++ b/src/skins/vector/img/minimise.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="16px" viewBox="-1 -1 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>minimise</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_1-Chat-collapsed-w-topic" sketch:type="MSArtboardGroup" transform="translate(-176.000000, -27.000000)" stroke-width="2" stroke="#76CFA6">
+            <g id="Room-list" sketch:type="MSLayerGroup">
+                <g id="Room-list/Header" sketch:type="MSShapeGroup">
+                    <g id="minimise" transform="translate(172.000000, 25.000000)">
+                        <path d="M7,5 L15,5 L15,13" id="Path-53-Copy" transform="translate(11.000000, 9.000000) scale(-1, -1) rotate(-315.000000) translate(-11.000000, -9.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/right_search.svg
+++ b/src/skins/vector/img/right_search.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
+    <title>right_search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Room-header/Vector-Design" transform="translate(-710.000000, -25.000000)">
+            <g id="right_search" transform="translate(710.000000, 25.000000)">
+                <g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#76CFA6">
+                    <circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
+                </g>
+                <path d="M14,10.5 C14,9.53645352 13.6575555,8.71224301 12.9726562,8.02734375 C12.287757,7.34244449 11.4635465,7 10.5,7 C9.53645352,7 8.71224301,7.34244449 8.02734375,8.02734375 C7.34244449,8.71224301 7,9.53645352 7,10.5 C7,11.4635465 7.34244449,12.287757 8.02734375,12.9726562 C8.71224301,13.6575555 9.53645352,14 10.5,14 C11.4635465,14 12.287757,13.6575555 12.9726562,12.9726562 C13.6575555,12.287757 14,11.4635465 14,10.5 L14,10.5 Z M18,17 C18,17.2708347 17.9010427,17.5052073 17.703125,17.703125 C17.5052073,17.9010427 17.2708347,18 17,18 C16.7187486,18 16.4843759,17.9010427 16.296875,17.703125 L13.6171875,15.03125 C12.6848912,15.6770866 11.6458391,16 10.5,16 C9.75520461,16 9.04297215,15.8554702 8.36328125,15.5664062 C7.68359035,15.2773423 7.09765871,14.8867212 6.60546875,14.3945312 C6.11327879,13.9023413 5.7226577,13.3164096 5.43359375,12.6367188 C5.1445298,11.9570279 5,11.2447954 5,10.5 C5,9.75520461 5.1445298,9.04297215 5.43359375,8.36328125 C5.7226577,7.68359035 6.11327879,7.09765871 6.60546875,6.60546875 C7.09765871,6.11327879 7.68359035,5.7226577 8.36328125,5.43359375 C9.04297215,5.1445298 9.75520461,5 10.5,5 C11.2447954,5 11.9570279,5.1445298 12.6367188,5.43359375 C13.3164096,5.7226577 13.9023413,6.11327879 14.3945312,6.60546875 C14.8867212,7.09765871 15.2773423,7.68359035 15.5664062,8.36328125 C15.8554702,9.04297215 16,9.75520461 16,10.5 C16,11.6458391 15.6770866,12.6848912 15.03125,13.6171875 L17.7109375,16.296875 C17.9036468,16.4895843 18,16.723957 18,17 L18,17 Z" id="" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -27,8 +27,15 @@ require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');

+
+ // add React and ReactPerf to the global namespace, to make them easier to
+ // access via the console
+global.React = require("react");
+if (process.env.NODE_ENV !== 'production') {
+    global.ReactPerf = require("react-addons-perf");
+}
+
 var RunModernizrTests = require("./modernizr"); // this side-effects a global
-var React = require("react");
 var ReactDOM = require("react-dom");
 var sdk = require("matrix-react-sdk");
 sdk.loadSkin(require('../component-index'));
@@ -74,12 +81,27 @@ var validBrowser = checkBrowserFeatures([

 // We want to support some name / value pairs in the fragment
 // so we're re-using query string like format
+//
+// returns {location, params}
 function parseQsFromFragment(location) {
-    var hashparts = location.hash.split('?');
+    // if we have a fragment, it will start with '#', which we need to drop.
+    // (if we don't, this will return '').
+    var fragment = location.hash.substring(1);
+
+    // our fragment may contain a query-param-like section. we need to fish
+    // this out *before* URI-decoding because the params may contain ? and &
+    // characters which are only URI-encoded once.
+    var hashparts = fragment.split('?');
+
+    var result = {
+        location: decodeURIComponent(hashparts[0]),
+        params: {}
+    };
+
    if (hashparts.length > 1) {
-        return qs.parse(hashparts[1]);
+        result.params = qs.parse(hashparts[1]);
    }
-    return {};
+    return result;
 }

 function parseQs(location) {
@@ -89,17 +111,17 @@ function parseQs(location) {
 // Here, we do some crude URL analysis to allow
 // deep-linking.
 function routeUrl(location) {
+    console.log("Routing URL "+window.location);
    var params = parseQs(location);
    var loginToken = params.loginToken;
    if (loginToken) {
-        window.matrixChat.showScreen('token_login', parseQs(location));
-    }
-    else if (location.hash.indexOf('#/register') == 0) {
-        window.matrixChat.showScreen('register', parseQsFromFragment(location));
-    } else {
-        var hashparts = location.hash.split('?');
-        window.matrixChat.showScreen(hashparts[0].substring(2), parseQsFromFragment(location));
+        window.matrixChat.showScreen('token_login', params);
+        return;
    }
+
+    var fragparts = parseQsFromFragment(location);
+    window.matrixChat.showScreen(fragparts.location.substring(1),
+                                 fragparts.params);
 }

 function onHashChange(ev) {
@@ -120,6 +142,7 @@ var lastLoadedScreen = null;
 // This will be called whenever the SDK changes screens,
 // so a web page can update the URL bar appropriately.
 var onNewScreen = function(screen) {
+    console.log("newscreen "+screen);
    if (!loaded) {
        lastLoadedScreen = screen;
    } else {
@@ -144,6 +167,7 @@ var makeRegistrationUrl = function() {

 window.addEventListener('hashchange', onHashChange);
 window.onload = function() {
+    console.log("window.onload");
    if (!validBrowser) {
        return;
    }
@@ -158,15 +182,17 @@ window.onload = function() {
 }

 function loadApp() {
+    console.log("Vector starting at "+window.location);
    if (validBrowser) {
        var MatrixChat = sdk.getComponent('structures.MatrixChat');
+        var fragParts = parseQsFromFragment(window.location);
        window.matrixChat = ReactDOM.render(
            <MatrixChat
                onNewScreen={onNewScreen}
                registrationUrl={makeRegistrationUrl()}
                ConferenceHandler={VectorConferenceHandler}
                config={configJson}
-                startingQueryParams={parseQsFromFragment(window.location)}
+                startingQueryParams={fragParts.params}
                enableGuest={true} />,
            document.getElementById('matrixchat')
        );
--- a/test/all-tests.js
+++ b/test/all-tests.js
@@ -0,0 +1,13 @@
+// all-tests.js
+//
+// Our master test file: uses the webpack require API to find our test files
+// and run them
+
+// ideally these unit tests could be run under nodejs rather than in a browser
+// via karma, but having two separate test frameworks in the same project
+// seems confusing
+var unit_tests = require.context('./unit-tests', true, /\.js$/);
+unit_tests.keys().forEach(unit_tests);
+
+var app_tests = require.context('./app-tests', true, /\.jsx?$/);
+app_tests.keys().forEach(app_tests);
--- a/test/app-tests/joining.js
+++ b/test/app-tests/joining.js
@@ -0,0 +1,164 @@
+/*
+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.
+*/
+
+/* joining.js: tests for the various paths when joining a room */
+
+require('skin-sdk');
+
+var jssdk = require('matrix-js-sdk');
+
+var sdk = require('matrix-react-sdk');
+var peg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var MatrixChat = sdk.getComponent('structures.MatrixChat');
+var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
+var RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
+var RoomView = sdk.getComponent('structures.RoomView');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ReactTestUtils = require('react-addons-test-utils');
+var expect = require('expect');
+var q = require('q');
+
+var test_utils = require('../test-utils');
+var MockHttpBackend = require('../mock-request');
+
+var HS_URL='http://localhost';
+var IS_URL='http://localhost';
+var USER_ID='@me:localhost';
+var ACCESS_TOKEN='access_token';
+
+describe('joining a room', function () {
+    describe('over federation', function () {
+        var parentDiv;
+        var httpBackend;
+        var matrixChat;
+        
+        beforeEach(function() {
+            test_utils.beforeEach(this);
+            httpBackend = new MockHttpBackend();
+            jssdk.request(httpBackend.requestFn);
+            parentDiv = document.createElement('div');
+
+            // uncomment this to actually add the div to the UI, to help with
+            // debugging (but slow things down)
+            // document.body.appendChild(parentDiv);
+        });
+
+        afterEach(function() {
+            if (parentDiv) {
+                ReactDOM.unmountComponentAtNode(parentDiv);
+                parentDiv.remove();
+                parentDiv = null;
+            }
+        });
+        
+        it('should not get stuck at a spinner', function(done) {
+            var ROOM_ALIAS = '#alias:localhost';
+            var ROOM_ID = '!id:localhost';
+            
+            httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
+                .respond(200, {});
+            httpBackend.when('GET', '/pushrules').respond(200, {});
+            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
+            httpBackend.when('GET', '/sync').respond(200, {});
+            httpBackend.when('GET', '/publicRooms').respond(200, {chunk: []});
+
+            // start with a logged-in client
+            peg.replaceUsingAccessToken(HS_URL, IS_URL, USER_ID, ACCESS_TOKEN);
+            
+            var mc = <MatrixChat config={{}}/>;
+            matrixChat = ReactDOM.render(mc, parentDiv);
+
+            // switch to the Directory
+            dis.dispatch({
+                action: 'view_room_directory',
+            });
+
+            var roomView;
+            httpBackend.flush().then(() => {
+                var roomDir = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomDirectory);
+
+                // enter an alias in the input, and simulate enter
+                var input = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    roomDir, 'input');
+                input.value = ROOM_ALIAS;
+                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
+
+                // that should create a roomview which will start a peek; wait
+                // for the peek.
+                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ALIAS)+"/initialSync")
+                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // we should now have a roomview, with a preview bar
+                roomView = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomView);
+
+                var previewBar = ReactTestUtils.findRenderedComponentWithType(
+                    roomView, RoomPreviewBar);
+
+                var joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    previewBar, 'a');
+
+                ReactTestUtils.Simulate.click(joinLink);
+
+                // that will fire off a request to check our displayname, followed by a
+                // join request
+                httpBackend.when('GET', '/profile/'+encodeURIComponent(USER_ID))
+                    .respond(200, {displayname: 'boris'});
+                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
+                    .respond(200, {room_id: ROOM_ID});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // the roomview should now be loading
+                expect(roomView.state.room).toBe(null);
+                expect(roomView.state.joining).toBe(true);
+
+                // there should be a spinner
+                ReactTestUtils.findRenderedDOMComponentWithClass(
+                    roomView, "mx_Spinner");
+
+                // now send the room down the /sync pipe
+                httpBackend.when('GET', '/sync').
+                    respond(200, {
+                        rooms: {
+                            join: {
+                                [ROOM_ID]: {
+                                    state: {},
+                                    timeline: {
+                                        events: [],
+                                        limited: true,
+                                    },
+                                },
+                            },
+                        },
+                    });
+                return httpBackend.flush();
+            }).then(() => {
+                // now the room should have loaded
+                expect(roomView.state.room).toExist();
+                expect(roomView.state.joining).toBe(false);
+            }).done(done, done);
+        });
+    });
+});
--- a/test/mock-request.js
+++ b/test/mock-request.js
@@ -0,0 +1,228 @@
+"use strict";
+var q = require("q");
+var expect = require('expect');
+
+/**
+ * Construct a mock HTTP backend, heavily inspired by Angular.js.
+ * @constructor
+ */
+function HttpBackend() {
+    this.requests = [];
+    this.expectedRequests = [];
+    var self = this;
+    // the request function dependency that the SDK needs.
+    this.requestFn = function(opts, callback) {
+        var realReq = new Request(opts.method, opts.uri, opts.body, opts.qs);
+        realReq.callback = callback;
+        console.log("HTTP backend received request: %s %s", opts.method, opts.uri);
+        self.requests.push(realReq);
+
+        var abort = function() {
+            var idx = self.requests.indexOf(realReq);
+            if (idx >= 0) {
+                console.log("Aborting HTTP request: %s %s", opts.method, opts.uri);
+                self.requests.splice(idx, 1);
+            }
+        }
+        return {
+            abort: abort
+        };
+    };
+}
+HttpBackend.prototype = {
+    /**
+     * Respond to all of the requests (flush the queue).
+     * @param {string} path The path to flush (optional) default: all.
+     * @param {integer} numToFlush The number of things to flush (optional), default: all.
+     * @return {Promise} resolved when there is nothing left to flush.
+     */
+    flush: function(path, numToFlush) {
+        var defer = q.defer();
+        var self = this;
+        var flushed = 0;
+        var triedWaiting = false;
+        console.log(
+            "HTTP backend flushing... (path=%s  numToFlush=%s)", path, numToFlush
+        );
+        var tryFlush = function() {
+            // if there's more real requests and more expected requests, flush 'em.
+            console.log(
+                "  trying to flush queue => reqs=%s expected=%s [%s]",
+                self.requests.length, self.expectedRequests.length, path
+            );
+            if (self._takeFromQueue(path)) {
+                // try again on the next tick.
+                console.log("  flushed. Trying for more. [%s]", path);
+                flushed += 1;
+                if (numToFlush && flushed === numToFlush) {
+                    console.log("  [%s] Flushed assigned amount: %s", path, numToFlush);
+                    defer.resolve();
+                }
+                else {
+                    setTimeout(tryFlush, 0);
+                }
+            }
+            else if (flushed === 0 && !triedWaiting) {
+                // we may not have made the request yet, wait a generous amount of
+                // time before giving up.
+                setTimeout(tryFlush, 5);
+                triedWaiting = true;
+            }
+            else {
+                console.log("  no more flushes. [%s]", path);
+                defer.resolve();
+            }
+        };
+
+        setTimeout(tryFlush, 0);
+
+        return defer.promise;
+    },
+
+    /**
+     * Attempts to resolve requests/expected requests.
+     * @param {string} path The path to flush (optional) default: all.
+     * @return {boolean} true if something was resolved.
+     */
+    _takeFromQueue: function(path) {
+        var req = null;
+        var i, j;
+        var matchingReq, expectedReq, testResponse = null;
+        for (i = 0; i < this.requests.length; i++) {
+            req = this.requests[i];
+            for (j = 0; j < this.expectedRequests.length; j++) {
+                expectedReq = this.expectedRequests[j];
+                if (path && path !== expectedReq.path) { continue; }
+                if (expectedReq.method === req.method &&
+                        req.path.indexOf(expectedReq.path) !== -1) {
+                    if (!expectedReq.data || (JSON.stringify(expectedReq.data) ===
+                            JSON.stringify(req.data))) {
+                        matchingReq = expectedReq;
+                        this.expectedRequests.splice(j, 1);
+                        break;
+                    }
+                }
+            }
+
+            if (matchingReq) {
+                // remove from request queue
+                this.requests.splice(i, 1);
+                i--;
+
+                for (j = 0; j < matchingReq.checks.length; j++) {
+                    matchingReq.checks[j](req);
+                }
+                testResponse = matchingReq.response;
+                console.log("    responding to %s", matchingReq.path);
+                var body = testResponse.body;
+                if (Object.prototype.toString.call(body) == "[object Function]") {
+                    body = body(req.path, req.data);
+                }
+                req.callback(
+                    testResponse.err, testResponse.response, body
+                );
+                matchingReq = null;
+            }
+        }
+        if (testResponse) {  // flushed something
+            return true;
+        }
+        return false;
+    },
+
+    /**
+     * Makes sure that the SDK hasn't sent any more requests to the backend.
+     */
+    verifyNoOutstandingRequests: function() {
+        var firstOutstandingReq = this.requests[0] || {};
+        expect(this.requests.length).toEqual(0,
+            "Expected no more HTTP requests but received request to " +
+            firstOutstandingReq.path
+        );
+    },
+
+    /**
+     * Makes sure that the test doesn't have any unresolved requests.
+     */
+    verifyNoOutstandingExpectation: function() {
+        var firstOutstandingExpectation = this.expectedRequests[0] || {};
+        expect(this.expectedRequests.length).toEqual(
+            0,
+            "Expected to see HTTP request for "
+                + firstOutstandingExpectation.method
+                + " " + firstOutstandingExpectation.path
+        );
+    },
+
+    /**
+     * Create an expected request.
+     * @param {string} method The HTTP method
+     * @param {string} path The path (which can be partial)
+     * @param {Object} data The expected data.
+     * @return {Request} An expected request.
+     */
+    when: function(method, path, data) {
+        var pendingReq = new Request(method, path, data);
+        this.expectedRequests.push(pendingReq);
+        return pendingReq;
+    }
+};
+
+function Request(method, path, data, queryParams) {
+    this.method = method;
+    this.path = path;
+    this.data = data;
+    this.queryParams = queryParams;
+    this.callback = null;
+    this.response = null;
+    this.checks = [];
+}
+Request.prototype = {
+    /**
+     * Execute a check when this request has been satisfied.
+     * @param {Function} fn The function to execute.
+     * @return {Request} for chaining calls.
+     */
+    check: function(fn) {
+        this.checks.push(fn);
+        return this;
+    },
+
+    /**
+     * Respond with the given data when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Object|Function} data The HTTP JSON body. If this is a function,
+     * it will be invoked when the JSON body is required (which should be returned).
+     */
+    respond: function(code, data) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: data,
+            err: null
+        };
+    },
+
+    /**
+     * Fail with an Error when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Error} err The error to throw (e.g. Network Error)
+     */
+    fail: function(code, err) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: null,
+            err: err
+        };
+    },
+};
+
+/**
+ * The HttpBackend class.
+ */
+module.exports = HttpBackend;
--- a/test/skin-sdk.js
+++ b/test/skin-sdk.js
@@ -0,0 +1,8 @@
+/*
+ * skin-sdk.js
+ *
+ * Skins the react-sdk with the vector components
+ */
+
+var sdk = require('matrix-react-sdk');
+sdk.loadSkin(require('component-index'));
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -0,0 +1,24 @@
+"use strict";
+
+var q = require('q');
+
+/**
+ * Perform common actions before each test case, e.g. printing the test case
+ * name to stdout.
+ * @param {Mocha.Context} context  The test context
+ */
+module.exports.beforeEach = function(context) {
+    var desc = context.currentTest.fullTitle();
+    console.log();
+    console.log(desc);
+    console.log(new Array(1 + desc.length).join("="));
+};
+
+/**
+ * returns true if the current environment supports webrtc
+ */
+module.exports.browserSupportsWebRTC = function() {
+    var n = global.window.navigator;
+    return n.getUserMedia || n.webkitGetUserMedia ||
+        n.mozGetUserMedia;
+};
--- a/test/unit-tests/notifications/ContentRules-test.js
+++ b/test/unit-tests/notifications/ContentRules-test.js
@@ -0,0 +1,117 @@
+/*
+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 notifications = require('notifications');
+
+var ContentRules = notifications.ContentRules;
+var PushRuleVectorState = notifications.PushRuleVectorState;
+
+var expect = require('expect');
+var test_utils = require('../../test-utils');
+
+var NORMAL_RULE = {
+    actions: [
+        "notify",
+        { set_tweak: "highlight", value: false },
+    ],
+    enabled: true,
+    pattern: "vdh2",
+    rule_id: "vdh2",
+};
+
+var LOUD_RULE = {
+    actions: [
+        "notify",
+        { set_tweak: "highlight" },
+        { set_tweak: "sound", value: "default" },
+    ],
+    enabled: true,
+    pattern: "vdh2",
+    rule_id: "vdh2",
+};
+
+var USERNAME_RULE = {
+    actions: [
+        "notify",
+        { set_tweak: "sound", value: "default" },
+        { set_tweak: "highlight" },
+    ],
+    default: true,
+    enabled: true,
+    pattern: "richvdh",
+    rule_id: ".m.rule.contains_user_name",
+};
+
+
+
+describe("ContentRules", function() {
+    beforeEach(function() {
+        test_utils.beforeEach(this);
+    });
+
+    describe("parseContentRules", function() {
+        it("should handle there being no keyword rules", function() {
+            var rules = { 'global': { 'content': [
+                    USERNAME_RULE,
+            ]}};
+            var parsed = ContentRules.parseContentRules(rules);
+            expect(parsed.rules).toEqual([]);
+            expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
+            expect(parsed.externalRules).toEqual([]);
+        });
+
+        it("should parse regular keyword notifications", function() {
+            var rules = { 'global': { 'content': [
+                NORMAL_RULE,
+                USERNAME_RULE,
+            ]}};
+
+            var parsed = ContentRules.parseContentRules(rules);
+            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules[0]).toEqual(NORMAL_RULE);
+            expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
+            expect(parsed.externalRules).toEqual([]);
+        });
+
+        it("should parse loud keyword notifications", function() {
+            var rules = { 'global': { 'content': [
+                LOUD_RULE,
+                USERNAME_RULE,
+            ]}};
+
+            var parsed = ContentRules.parseContentRules(rules);
+            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules[0]).toEqual(LOUD_RULE);
+            expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
+            expect(parsed.externalRules).toEqual([]);
+        });
+
+        it("should parse mixed keyword notifications", function() {
+            var rules = { 'global': { 'content': [
+                LOUD_RULE,
+                NORMAL_RULE,
+                USERNAME_RULE,
+            ]}};
+
+            var parsed = ContentRules.parseContentRules(rules);
+            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules[0]).toEqual(LOUD_RULE);
+            expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
+            expect(parsed.externalRules.length).toEqual(1);
+            expect(parsed.externalRules[0]).toEqual(NORMAL_RULE);
+        });
+    });
+});
--- a/test/unit-tests/notifications/PushRuleVectorState-test.js
+++ b/test/unit-tests/notifications/PushRuleVectorState-test.js
@@ -0,0 +1,62 @@
+/*
+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 notifications = require('notifications');
+
+var prvs = notifications.PushRuleVectorState;
+
+var expect = require('expect');
+
+describe("PushRuleVectorState", function() {
+    describe("contentRuleVectorStateKind", function() {
+        it("should understand normal notifications", function () {
+            var rule = {
+                actions: [
+                    "notify",
+                ],
+            };
+
+            expect(prvs.contentRuleVectorStateKind(rule)).
+                toEqual(prvs.ON);
+        });
+
+        it("should handle loud notifications", function () {
+            var rule = {
+                actions: [
+                    "notify",
+                    { set_tweak: "highlight", value: true },
+                    { set_tweak: "sound", value: "default" },
+                ]
+            };
+
+            expect(prvs.contentRuleVectorStateKind(rule)).
+                toEqual(prvs.LOUD);
+        });
+
+        it("should understand missing highlight.value", function () {
+            var rule = {
+                actions: [
+                    "notify",
+                    { set_tweak: "highlight" },
+                    { set_tweak: "sound", value: "default" },
+                ]
+            };
+
+            expect(prvs.contentRuleVectorStateKind(rule)).
+                toEqual(prvs.LOUD);
+        });
+    });
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,14 @@ module.exports = {
            { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
            // css-raw-loader loads CSS but doesn't try to treat url()s as require()s
            { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
-        ]
+        ],
+        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/,
+        ],
    },
    output: {
        devtoolModuleFilenameTemplate: function(info) {
@@ -34,6 +41,10 @@ module.exports = {
            // 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'),
+            "react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
+
+            // same goes for js-sdk
+            "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),

            // matrix-js-sdk will use olm if it is available,
            // but does not explicitly depend on it. Pull it
Author	SHA1	Message	Date
Richard van der Hoff	4cddda67d9	0.6.1	2016-04-22 11:35:51 +01:00
Richard van der Hoff	c2d4409241	Prepare changelog for v0.6.1	2016-04-22 11:35:50 +01:00
Richard van der Hoff	ee88fe55c1	Bump to react-sdk 0.5.2	2016-04-22 11:30:33 +01:00
Richard van der Hoff	b8018942fc	Bump react-gemini-scrollbar (to pick up a non-broken version)	2016-04-20 13:46:59 +01:00
Richard van der Hoff	3136eb0962	Merge pull request #1438 from vector-im/rav/update_gemini Don't relayout scrollpanels every time something changes	2016-04-20 12:32:57 +01:00
Richard van der Hoff	02f58ef9e3	Don't relayout scrollpanels every time something changes Gemini's habit of reflowing everything everytime anything changes at all makes for an unresponsive app. Turn it off everywhere we use gemini.	2016-04-20 12:29:32 +01:00
Richard van der Hoff	b5f029d10e	Turn react consistency checks off in develop builds For now at least, turn off the consistency checks in build:dev, and hence in /develop. This will allow us to more meaningfully compare performance between /beta and /develop.	2016-04-19 20:28:29 +01:00
Richard van der Hoff	caff20cbb3	Merge pull request #1431 from vector-im/rav/reactperf Include react-addons-perf for non-production builds	2016-04-19 19:28:15 +01:00
Richard van der Hoff	e71ca328e7	Switch back to dev builds of the react-sdk and js-sdk	2016-04-19 18:32:35 +01:00
Richard van der Hoff	a0b460b084	Include react-addons-perf for non-production builds This makes it possible to gather a few performance stats	2016-04-19 15:01:24 +01:00
Richard van der Hoff	abca28c80b	0.6.0	2016-04-19 13:39:40 +01:00
Richard van der Hoff	5627089a2a	Prepare changelog for v0.6.0	2016-04-19 13:39:40 +01:00
Richard van der Hoff	da7909f1ce	Bump to release versions of js-sdk and react-sdk ... in preparation for vector release.	2016-04-19 13:36:25 +01:00
Richard van der Hoff	210cb31852	Upgrade to react 15.0 (which also requires upgrades to react-gemini-scrollbar and react-dnd)	2016-04-17 21:41:50 +01:00
Matthew Hodgson	aeb438dc62	fix tbody & keying warnings	2016-04-17 17:44:04 +01:00
Matthew Hodgson	10a053019d	fix thinkos - thanks @richvdh for posthoc review	2016-04-17 17:35:17 +01:00
Matthew Hodgson	58c431abc2	fix spinner layout bouncing when changing notifs all-important s/done/then/ on pushRulesPromise to ensure that the refresh completes before relaying-out the page s/Loud/Highlight & sound/	2016-04-17 14:00:20 +01:00
Matthew Hodgson	d512e25cca	persist search filter over being hidden	2016-04-17 00:28:33 +01:00
Matthew Hodgson	65d9333104	pointer on roomsublist	2016-04-16 23:49:21 +01:00
Matthew Hodgson	fbd974df55	fix bottomleft bug in chrome canary	2016-04-16 23:49:16 +01:00
Matthew Hodgson	fdf83a5ad5	fix tooltip offset	2016-04-15 22:24:20 +01:00
Matthew Hodgson	c98e06e1aa	add cancelButton to simpleHeader	2016-04-15 22:16:06 +01:00
Matthew Hodgson	b58265a69c	fix comedy FontAwesome bug	2016-04-15 21:48:09 +01:00
Matthew Hodgson	37fbad0dbe	fix LeftPanel width in FF	2016-04-15 21:37:52 +01:00
Matthew Hodgson	756da03b9a	fix wrapping of RoomTile when selected	2016-04-15 20:50:22 +01:00
Matthew Hodgson	48e082e124	Merge pull request #1402 from vector-im/matthew/design_tweaks Matthew/design tweaks	2016-04-15 18:48:30 +01:00
Matthew Hodgson	c606912a8d	fix topic font size	2016-04-15 18:45:52 +01:00
Matthew Hodgson	7cd24e7dbd	commented out fading for RoomDirectory	2016-04-15 18:29:57 +01:00
Matthew Hodgson	c7d717f0a4	fix RightPanel	2016-04-15 18:29:49 +01:00
Matthew Hodgson	cf3cdaccf3	fix up UserSettings a bit	2016-04-15 18:23:47 +01:00
Matthew Hodgson	d0d4760ddc	align highlight with droptarget RHS	2016-04-15 18:09:10 +01:00
Matthew Hodgson	51bc18aef0	prettier icon	2016-04-15 18:05:57 +01:00
Matthew Hodgson	26d12bebe4	wire up searchbox filtering, and some minor overall tweaks	2016-04-15 17:54:48 +01:00
Matthew Hodgson	90ae024a4e	tidy up rightpanel and searchbox	2016-04-15 15:53:27 +01:00
David Baker	57c7d81f43	Merge pull request #1399 from vector-im/rav/fix_unparsable_notifications Improve handling of notification rules we can't parse	2016-04-15 13:00:04 +01:00
Richard van der Hoff	eab206c3bd	Improve handling of notification rules we can't parse * An absent rule is the same as a rule with 'enabled == false', and is not necessarily 'OFF' (particularly in the case of the bot rule, which is inverted). * If we don't understand the rule, then don't tick any of the radio buttons, and instead show it in the 'external' section.	2016-04-15 12:42:03 +01:00
Matthew Hodgson	72745b05dc	forgotten CSS	2016-04-15 10:49:25 +01:00
Matthew Hodgson	f8d5101dbc	add lost SVGs and implement SearchBox skeleton	2016-04-15 02:23:12 +01:00
Matthew Hodgson	cc1e30c963	dinkier topic	2016-04-15 01:42:44 +01:00
Richard van der Hoff	121fe34180	Improve parsing of keyword notification rules For notification rules, the absence of a value on a 'highlight' tweak means that the highlight should happen; this was previously confusing us. Use the action parser from NotificationUtils to simplify the code. Fixes https://github.com/vector-im/vector-web/issues/1330	2016-04-14 22:45:00 +01:00
Richard van der Hoff	5450223cc7	More notifications fixes Fix another thing I broke during the refactor	2016-04-14 22:31:40 +01:00
Matthew Hodgson	25b5c14527	fix new bottomleft menu	2016-04-14 22:26:48 +01:00
Matthew Hodgson	6bc4c87ce4	update to new bottomleftmenu. update header and composer heights	2016-04-14 21:43:49 +01:00
Richard van der Hoff	0f0c3d0ca1	Merge branch 'rav/more_refactor_notifications' into develop	2016-04-14 21:27:34 +01:00
Matthew Hodgson	96c4a24d3d	skin RoomSubList chevrons, horizontal rules and selected room	2016-04-14 21:10:55 +01:00
Richard van der Hoff	c6b501811f	Move more stuff out of Notifications.js	2016-04-14 19:54:03 +01:00
Richard van der Hoff	0996a0b140	Fixes to refactored notifications A few things I managed to break in the recent refactor	2016-04-14 19:54:03 +01:00
Matthew Hodgson	8557a3b70e	fix vertical alignment within status bar	2016-04-14 19:15:35 +01:00
Matthew Hodgson	8b6cf1fc41	change badge look & feel; change status bar sizing	2016-04-14 19:11:58 +01:00
Matthew Hodgson	4eb762d52b	spell out that images are clickable	2016-04-14 18:16:03 +01:00
Matthew Hodgson	4d221c6099	spell out that images are clickable	2016-04-14 18:15:51 +01:00
Richard van der Hoff	314bfbd541	Merge pull request #1391 from vector-im/rav/unoptimize_develop Do less mangling of jenkins builds	2016-04-14 15:55:13 +01:00
Richard van der Hoff	5cdd234bf2	Do less mangling of jenkins builds This turns off uglification, and turns on the react sanity checks.	2016-04-14 15:05:36 +01:00
Richard van der Hoff	b6d5849bec	Merge pull request #1386 from vector-im/rav/refactor_notifications Start Notifications component refactor	2016-04-14 14:29:11 +01:00
Richard van der Hoff	035b15f330	Moar debug for ff session restore issue	2016-04-13 22:18:26 +01:00
Richard van der Hoff	77355cbeb4	Add some debug to help with FF restore bug (https://github.com/vector-im/vector-web/issues/1354)	2016-04-13 21:01:24 +01:00
Richard van der Hoff	ff5dff45f5	Start Notifications component refactor Factor some things out of the mega Notifications component, and add a dummy unit test to show willing	2016-04-13 18:44:41 +01:00
Richard van der Hoff	0deb52ac5e	Merge branch 'rav/karma' into develop Run test suite under karma as part of build	2016-04-13 18:23:52 +01:00
Richard van der Hoff	29ff9c11a8	Final karma tweaks * fix a comment * drop redundant import	2016-04-13 18:22:05 +01:00
Richard van der Hoff	cb3ae0e069	Disable autoWatch for npm test ... we're only going to run the tests once, so there is no need to tell webpack to watch the sources. This saves a spurious repack.	2016-04-13 18:13:57 +01:00
Richard van der Hoff	bf31d6d5fa	Karma test tweaks * Make sure we only get one js-sdk (and update runtime config to match) * Don't verifyNoOutstandingRequests (since it is hard to be certain which we will get, and makes the tests too dependent on implementation-specifics). * Disable color for npm test, to avoid confusing Jenkins	2016-04-13 17:41:23 +01:00
Richard van der Hoff	181a6a61ff	tests: Don't add the div to the DOM	2016-04-13 17:20:06 +01:00
Richard van der Hoff	322af6513d	Run some tests under karma Including a regression test for https://github.com/vector-im/vector-web/issues/1314	2016-04-13 17:20:06 +01:00
Richard van der Hoff	69ce3c43cf	Revert "Merge branch 'develop' into rav/karma" The karma tests don't pass yet, and aren't ready to land on develop. This reverts commit `438453e61a`, reversing changes made to `50f94eb040`.	2016-04-13 17:17:45 +01:00
Richard van der Hoff	438453e61a	Merge branch 'develop' into rav/karma	2016-04-13 16:16:26 +01:00
Matthew Hodgson	50f94eb040	stop guests rom trying to blunder into non-guest rooms	2016-04-13 13:33:23 +01:00
David Baker	5794c30def	Devices should be below 'advanced'	2016-04-13 11:35:53 +01:00
Richard van der Hoff	a512e600a7	tests: Don't add the div to the DOM	2016-04-13 11:16:38 +01:00
Richard van der Hoff	429d110212	Run some tests under karma Including a regression test for https://github.com/vector-im/vector-web/issues/1314	2016-04-13 10:15:04 +01:00
Matthew Hodgson	b5248c06a7	fix https://github.com/vector-im/vector-web/issues/987 for once and for all	2016-04-13 00:34:32 +01:00
Matthew Hodgson	18bd1058d3	Merge pull request #1376 from vector-im/matthew/fadable make the UI fadable to help with decluttering	2016-04-12 18:04:47 +01:00
Matthew Hodgson	b18fcf7f9e	spinner on saving room settings	2016-04-12 18:02:31 +01:00
Matthew Hodgson	05e963d1e2	make the UI fadable to help with decluttering	2016-04-12 17:17:08 +01:00
David Baker	be55882f46	Merge pull request #1374 from vector-im/dbkr/get_pushers Get and display a user's pushers in settings	2016-04-12 14:41:45 +01:00
David Baker	356a4a4392	Typo and use CSS rather than <i>	2016-04-12 14:10:17 +01:00
Matthew Hodgson	34bdd40953	timestamps are permalinks	2016-04-12 13:34:10 +01:00
David Baker	c5524851f3	Comment future possibility for deleting pushers	2016-04-12 13:22:58 +01:00
David Baker	cff1c3010b	Get & display pushers in settings Really this is so (in a subsequent PR) we can show whether a user has an email pusher, but we can basically display the list of pushers for free, so adding this too.	2016-04-12 13:18:57 +01:00
Matthew Hodgson	46572ae793	click on group call thumbnail should return you to the group call, not the 1:1	2016-04-12 02:27:35 +01:00
Matthew Hodgson	b1ba69fd00	fix lightbox overscroll	2016-04-12 00:35:00 +01:00
Matthew Hodgson	8c619fedeb	Merge pull request #1343 from vector-im/matthew/preview_urls URL previewing support	2016-04-11 23:55:18 +01:00
Matthew Hodgson	efd01d6929	move localstorage crap entirely to TextualBody	2016-04-11 23:54:00 +01:00
Matthew Hodgson	a1b78f93fe	Fix wrap on view source	2016-04-10 14:18:57 +01:00
Matthew Hodgson	cdc89c0623	add the concept of eventTileOps for managing widget visibility based on vdh's PR feedback	2016-04-08 21:42:42 +01:00
Matthew Hodgson	d107151f8a	rename `size` prop as `fileSize`, add comments, and honour explicit properties rather than mxEvent fields	2016-04-07 18:10:15 +01:00
Matthew Hodgson	48abc75665	Merge branch 'develop' into matthew/preview_Urls	2016-04-07 17:25:17 +01:00
Matthew Hodgson	41373f30f7	oops, name LinkPreviewWidget correctly	2016-04-04 00:33:15 +01:00
Matthew Hodgson	ad9d032f82	fix typo introduced in #1340	2016-04-04 00:17:50 +01:00
Matthew Hodgson	d7eb23db53	specify sizes and hyperlinks for non-event images	2016-04-04 00:16:52 +01:00
Matthew Hodgson	333f1e46ca	document properties and remove spurious 'view full screen' button	2016-04-03 23:57:44 +01:00
Matthew Hodgson	d414127f80	track whether widget should be hidden on the event, as well as persisting it in localStorage	2016-04-03 23:31:42 +01:00
Matthew Hodgson	ff2885087d	support cancelling and uncancelling previews	2016-04-03 02:50:51 +01:00
Matthew Hodgson	a5258978d6	Merge branch 'develop' into matthew/preview_urls	2016-04-03 02:07:03 +01:00
Matthew Hodgson	8c0a23dd8b	fix widget layout	2016-04-03 02:06:24 +01:00
Matthew Hodgson	d434ea55a8	Merge pull request #1332 from aviraldg/feature-emoji 😄 Emoji autocomplete and unicode emoji to image conversion using emojione.	2016-04-02 23:21:31 +01:00
Matthew Hodgson	4331fbf422	Merge pull request #1340 from aviraldg/fix-65 Show full-size avatar on MemberInfo avatar click	2016-04-02 23:20:39 +01:00
Aviral Dasgupta	cf17ea6254	Show full-size avatar on MemberInfo avatar click fixes vector-im/vector-web#65	2016-04-03 00:53:17 +05:30
Matthew Hodgson	8247bb4a76	match style for markdown quotes	2016-04-02 00:36:53 +01:00
Matthew Hodgson	08a41bf093	improve layout for LinkPreviewWidget	2016-04-01 02:16:29 +01:00
Aviral Dasgupta	d7157696f4	styling for emojione emojis 😄	2016-04-01 06:22:13 +05:30
Richard van der Hoff	bf055688b7	Switch js-sdk and react-sdk back to develop	2016-03-31 16:35:38 +01:00
Matthew Hodgson	28b9892486	burndown generator	2016-03-30 21:25:18 +01:00
Matthew Hodgson	512a9125bf	fix zalgos in SenderProfile again, whilst maintaining limited-width name via inline-block. and without doubling emote vertical space...	2016-03-30 19:47:06 +01:00
Richard van der Hoff	00a92452e8	0.5.0	2016-03-30 13:31:09 +01:00
Richard van der Hoff	32576e97d5	Prepare changelog for v0.5.0	2016-03-30 13:31:09 +01:00
Richard van der Hoff	20f93e761b	Bump to react-sdk 0.4.0 and js-sdk 0.5.1.	2016-03-30 13:27:55 +01:00
Matthew Hodgson	bdf8f655fb	tweak animation and comment it out for now as it maxes out a whole core on my top-of-the-line MBP...	2016-03-30 01:36:44 +01:00
Matthew Hodgson	8603dd4bb4	Merge pull request #1292 from aviraldg/feature-pretty-placeholder Prettier, animated placeholder :D	2016-03-30 01:28:34 +01:00
Matthew Hodgson	212a070a02	add a github issues graphing script	2016-03-30 01:23:44 +01:00
Richard van der Hoff	e15358f77e	Merge pull request #1307 from vector-im/rav/SimpleRoomHeader RoomDirectory: use SimpleRoomHeader instead of RoomHeader	2016-03-29 23:26:09 +01:00
Richard van der Hoff	851b601d2c	Pass SimpleRoomHeader topic in as a named prop	2016-03-29 23:25:26 +01:00
Richard van der Hoff	f52a1cf311	Merge pull request #1277 from vector-im/rav/no_parse_languages Tell webpack not to parse the highlight.js languages	2016-03-29 22:48:58 +01:00
Matthew Hodgson	0ddb2cf183	fix action vertical spacing	2016-03-29 17:10:11 +01:00
Richard van der Hoff	cf0340c1c7	RoomDirectory: use SimpleRoomHeader instead of RoomHeader SimpleRoomHeader and RoomHeader are now separate things (https://github.com/matrix-org/matrix-react-sdk/pull/252), so update Vector accordingly.	2016-03-29 16:45:24 +01:00
Aviral Dasgupta	6c5b4a298b	Prettier, animated placeholder :D	2016-03-28 19:32:04 +05:30
Richard van der Hoff	c5c5e6d811	Tell webpack not to parse the highlight.js languages Hopefully, this fixes https://github.com/vector-im/vector-web/issues/1046 without any side-effects. It relies on the fact that the languages files are pretty simple - in particular, they don't require any other modules. So we can tell webpack just to suck them in as they are, rather than parsing them and causing an explosm.	2016-03-24 22:51:50 +00:00
Richard van der Hoff	2462ede539	Switch to dev versions of react-sdk and js-sdk	2016-03-24 17:39:49 +00:00
Richard van der Hoff	b6e4c59877	Merge pull request #1249 from vector-im/dbkr/disable_composer_if_no_permission CSS for https://github.com/matrix-org/matrix-react-sdk/pull/247	2016-03-24 11:44:16 +00:00
Matthew Hodgson	0bc1624d4e	make senderprofile smaller	2016-03-24 01:19:55 +00:00
Matthew Hodgson	f81f7db6cd	fix layout problems exposed by #cats	2016-03-24 01:12:27 +00:00
Matthew Hodgson	9e95d2e4ac	make image event bodies display as blocks to avoid auto sizing, so we can measure their width to explicitly set their height	2016-03-24 00:13:03 +00:00
Richard van der Hoff	95a46ae201	Merge pull request #1254 from vector-im/rav/uridecode_fragment URI-decode the hash-fragment	2016-03-23 22:59:46 +00:00
David Baker	8764b44325	Un-commit config change	2016-03-23 16:41:17 +00:00
Richard van der Hoff	090db5490b	URI-decode the hash-fragment It looks like % characters in the hash-fragment are meant to be interpreted as a URI-encoding, so we should decode them.	2016-03-23 15:58:00 +00:00
David Baker	cfcb050822	Add composer controls wrapper to set correct width on the composer controls wrapper div	2016-03-23 15:21:37 +00:00
David Baker	66e36e9d40	CSS for https://github.com/matrix-org/matrix-react-sdk/pull/247	2016-03-23 15:15:38 +00:00