Merge pull request #42 from matrix-org/kegan/controller-merging4

Phase 4 controller merging

src/components/views/dialogs/ErrorDialog.js

@@ -0,0 +1,65 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ * Usage:
+ * Modal.createDialog(ErrorDialog, {
+ *   title: "some text", (default: "Error")
+ *   description: "some more text",
+ *   button: "Button Text",
+ *   onClose: someFunction,
+ *   focus: true|false (default: true)
+ * });
+ */
+
+var React = require("react");
+
+module.exports = React.createClass({
+    displayName: 'ErrorDialog',
+    propTypes: {
+        title: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "Error",
+            description: "An error has occurred.",
+            button: "OK",
+            focus: true,
+        };
+    },
+
+    render: function() {
+        return (
+            <div className="mx_ErrorDialog">
+                <div className="mx_ErrorDialogTitle">
+                    {this.props.title}
+                </div>
+                <div className="mx_Dialog_content">
+                    {this.props.description}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.props.onFinished} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/dialogs/LogoutPrompt.js

@@ -0,0 +1,48 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require('react');
+var dis = require("../../../dispatcher");
+
+module.exports = React.createClass({
+    displayName: 'LogoutPrompt',
+    logOut: function() {
+        dis.dispatch({action: 'logout'});
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    cancelPrompt: function() {
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    render: function() {
+        return (
+            <div>
+                <div className="mx_Dialog_content">
+                    Sign out?
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.logOut}>Sign Out</button>
+                    <button onClick={this.cancelPrompt}>Cancel</button>
+                </div>
+            </div>
+        );
+    }
+});
+

src/components/views/dialogs/QuestionDialog.js

@@ -0,0 +1,67 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+
+module.exports = React.createClass({
+    displayName: 'QuestionDialog',
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "",
+            description: "",
+            button: "OK",
+            focus: true,
+        };
+    },
+
+    onOk: function() {
+        this.props.onFinished(true);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        return (
+            <div className="mx_QuestionDialog">
+                <div className="mx_QuestionDialogTitle">
+                    {this.props.title}
+                </div>
+                <div className="mx_Dialog_content">
+                    {this.props.description}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onOk} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+
+                    <button onClick={this.onCancel}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/login/RegistrationForm.js

@@ -0,0 +1,126 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+    displayName: 'RegistrationForm',
+
+    propTypes: {
+        defaultEmail: React.PropTypes.string,
+        defaultUsername: React.PropTypes.string,
+        showEmail: React.PropTypes.bool,
+        minPasswordLength: React.PropTypes.number,
+        onError: React.PropTypes.func,
+        onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+    },
+
+    getDefaultProps: function() {
+        return {
+            showEmail: false,
+            minPasswordLength: 6,
+            onError: function(e) {
+                console.error(e);
+            }
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            email: this.props.defaultEmail,
+            username: this.props.defaultUsername,
+            password: null,
+            passwordConfirm: null
+        };
+    },
+
+    onSubmit: function(ev) {
+        ev.preventDefault();
+
+        var pwd1 = this.refs.password.value.trim();
+        var pwd2 = this.refs.passwordConfirm.value.trim()
+
+        var errCode;
+        if (!pwd1 || !pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+        }
+        else if (pwd1 !== pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+        }
+        else if (pwd1.length < this.props.minPasswordLength) {
+            errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+        }
+        if (errCode) {
+            this.props.onError(errCode);
+            return;
+        }
+
+        var promise = this.props.onRegisterClick({
+            username: this.refs.username.value.trim(),
+            password: pwd1,
+            email: this.refs.email.value.trim()
+        });
+
+        if (promise) {
+            ev.target.disabled = true;
+            promise.finally(function() {
+                ev.target.disabled = false;
+            });
+        }
+    },
+
+    render: function() {
+        var emailSection, registerButton;
+        if (this.props.showEmail) {
+            emailSection = (
+                <input className="mx_Login_field" type="text" ref="email"
+                    autoFocus={true} placeholder="Email address"
+                    defaultValue={this.state.email} />
+            );
+        }
+        if (this.props.onRegisterClick) {
+            registerButton = (
+                <input className="mx_Login_submit" type="submit" value="Register" />
+            );
+        }
+
+        return (
+            <div>
+                <form onSubmit={this.onSubmit}>
+                    {emailSection}
+                    <br />
+                    <input className="mx_Login_field" type="text" ref="username"
+                        placeholder="User name" defaultValue={this.state.username} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="password"
+                        placeholder="Password" defaultValue={this.state.password} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="passwordConfirm"
+                        placeholder="Confirm password"
+                        defaultValue={this.state.passwordConfirm} />
+                    <br />
+                    {registerButton}
+                </form>
+            </div>
+        );
+    }
+});

src/components/views/login/ServerConfig.js

@@ -0,0 +1,161 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var Modal = require('../../../Modal');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
+module.exports = React.createClass({
+    displayName: 'ServerConfig',
+
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        defaultHsUrl: React.PropTypes.string,
+        defaultIsUrl: React.PropTypes.string,
+        withToggleButton: React.PropTypes.bool,
+        delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            withToggleButton: false,
+            delayTimeMs: 0
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.defaultHsUrl,
+            is_url: this.props.defaultIsUrl,
+            original_hs_url: this.props.defaultHsUrl,
+            original_is_url: this.props.defaultIsUrl,
+            // no toggle button = show, toggle button = hide
+            configVisible: !this.props.withToggleButton
+        }
+    },
+
+    onHomeserverChanged: function(ev) {
+        this.setState({hs_url: ev.target.value}, function() {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+                this.props.onHsUrlChanged(this.state.hs_url);
+            });
+        });
+    },
+
+    onIdentityServerChanged: function(ev) {
+        this.setState({is_url: ev.target.value}, function() {
+            this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+                this.props.onIsUrlChanged(this.state.is_url);
+            });
+        });
+    },
+
+    _waitThenInvoke: function(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
+    },
+
+    onServerConfigVisibleChange: function(ev) {
+        this.setState({
+            configVisible: ev.target.checked
+        });
+    },
+
+    showHelpPopup: function() {
+        var ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+        Modal.createDialog(ErrorDialog, {
+            title: 'Custom Server Options',
+            description: <span>
+                You can use the custom server options to log into other Matrix
+                servers by specifying a different Home server URL.
+                <br/>
+                This allows you to use Vector with an existing Matrix account on
+                a different Home server.
+                <br/>
+                <br/>
+                You can also set a custom Identity server but this will affect
+                people&#39;s ability to find you if you use a server in a group other
+                than the main Matrix.org group.
+            </span>,
+            button: "Dismiss",
+            focus: true
+        });
+    },
+
+    render: function() {
+        var serverConfigStyle = {};
+        serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
+
+        var toggleButton;
+        if (this.props.withToggleButton) {
+            toggleButton = (
+                <div>
+                    <input className="mx_Login_checkbox" id="advanced" type="checkbox"
+                        checked={this.state.configVisible}
+                        onChange={this.onServerConfigVisibleChange} />
+                    <label className="mx_Login_label" htmlFor="advanced">
+                        Use custom server options (advanced)
+                    </label>
+                </div>
+            );
+        }
+
+        return (
+        <div>
+            {toggleButton}
+            <div style={serverConfigStyle}>
+                <div className="mx_ServerConfig">
+                    <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
+                        Home server URL
+                    </label>
+                    <input className="mx_Login_field" id="hsurl" type="text"
+                        placeholder={this.state.original_hs_url}
+                        value={this.state.hs_url}
+                        onChange={this.onHomeserverChanged} />
+                    <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
+                        Identity server URL
+                    </label>
+                    <input className="mx_Login_field" id="isurl" type="text"
+                        placeholder={this.state.original_is_url}
+                        value={this.state.is_url}
+                        onChange={this.onIdentityServerChanged} />
+                    <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                        What does this mean?
+                    </a>
+                </div>
+            </div>
+        </div>
+        );
+    }
+});

src/components/views/rooms/MemberInfo.js

@@ -49,7 +49,7 @@ module.exports = React.createClass({
     },
 
     onKick: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         MatrixClientPeg.get().kick(roomId, target).done(function() {
@@ -66,7 +66,7 @@ module.exports = React.createClass({
     },
 
     onBan: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         MatrixClientPeg.get().ban(roomId, target).done(function() {
@@ -83,7 +83,7 @@ module.exports = React.createClass({
     },
 
     onMuteToggle: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         var room = MatrixClientPeg.get().getRoom(roomId);
@@ -127,7 +127,7 @@ module.exports = React.createClass({
     },
 
     onModToggle: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         var room = MatrixClientPeg.get().getRoom(roomId);
@@ -224,8 +224,8 @@ module.exports = React.createClass({
     // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
     // Not sure what the right solution to this is.
     onLeaveClick: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
-        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         var roomId = this.props.member.roomId;
         Modal.createDialog(QuestionDialog, {

src/components/views/rooms/MemberList.js

@@ -0,0 +1,291 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
+var GeminiScrollbar = require('react-gemini-scrollbar');
+
+var INITIAL_LOAD_NUM_MEMBERS = 50;
+
+module.exports = React.createClass({
+    displayName: 'MemberList',
+    getInitialState: function() {
+        if (!this.props.roomId) return { members: [] };
+        var cli = MatrixClientPeg.get();
+        var room = cli.getRoom(this.props.roomId);
+        if (!room) return { members: [] };
+
+        this.memberDict = this.getMemberDict();
+
+        var members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
+        return {
+            members: members
+        };
+    },
+
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+        cli.on("RoomMember.name", this.onRoomMemberName);
+        cli.on("Room", this.onRoom); // invites
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room", this.onRoom);
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
+            MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
+        }
+    },
+
+    componentDidMount: function() {
+        var self = this;
+
+        // Lazy-load in more than the first N members
+        setTimeout(function() {
+            if (!self.isMounted()) return;
+            self.setState({
+                members: self.roomMembers()
+            });
+        }, 50);
+
+        // Attach a SINGLE listener for global presence changes then locate the
+        // member tile and re-render it. This is more efficient than every tile
+        // evar attaching their own listener.
+        function updateUserState(event, user) {
+            // XXX: evil hack to track the age of this presence info.
+            // this should be removed once syjs-28 is resolved in the JS SDK itself.
+            user.lastPresenceTs = Date.now();
+
+            var tile = self.refs[user.userId];
+
+            if (tile) {
+                self._updateList(); // reorder the membership list
+            }
+        }
+        // FIXME: we should probably also reset 'lastActiveAgo' to zero whenever
+        // we see a typing notif from a user, as we don't get presence updates for those.
+        MatrixClientPeg.get().on("User.presence", updateUserState);
+        this.userPresenceFn = updateUserState;
+    },
+    // Remember to set 'key' on a MemberList to the ID of the room it's for
+    /*componentWillReceiveProps: function(newProps) {
+    },*/
+
+    onRoom: function(room) {
+        if (room.roomId !== this.props.roomId) {
+            return;
+        }
+        // We listen for room events because when we accept an invite
+        // we need to wait till the room is fully populated with state
+        // before refreshing the member list else we get a stale list.
+        this._updateList();
+    },
+
+    onRoomStateMember: function(ev, state, member) {
+        this._updateList();
+    },
+
+    onRoomMemberName: function(ev, member) {
+        this._updateList();
+    },
+
+    _updateList: function() {
+        this.memberDict = this.getMemberDict();
+
+        var self = this;
+        this.setState({
+            members: self.roomMembers()
+        });
+    },
+
+    onInvite: function(inputText) {
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        var self = this;
+        inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
+        var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
+
+        // sanity check the input for user IDs
+        if (!isEmailAddress && (inputText[0] !== '@' || inputText.indexOf(":") === -1)) {
+            console.error("Bad user ID to invite: %s", inputText);
+            Modal.createDialog(ErrorDialog, {
+                title: "Invite Error",
+                description: "Malformed user ID. Should look like '@localpart:domain'"
+            });
+            return;
+        }
+
+        var promise;
+        if (isEmailAddress) {
+            promise = MatrixClientPeg.get().inviteByEmail(this.props.roomId, inputText);
+        }
+        else {
+            promise = MatrixClientPeg.get().invite(this.props.roomId, inputText);
+        }
+
+        self.setState({
+            inviting: true
+        });
+        console.log(
+            "Invite %s to %s - isEmail=%s", inputText, this.props.roomId, isEmailAddress
+        );
+        promise.done(function(res) {
+            console.log("Invited");
+            self.setState({
+                inviting: false
+            });
+        }, function(err) {
+            console.error("Failed to invite: %s", JSON.stringify(err));
+            Modal.createDialog(ErrorDialog, {
+                title: "Server error whilst inviting",
+                description: err.message
+            });
+            self.setState({
+                inviting: false
+            });
+        });
+    },
+
+    getMemberDict: function() {
+        if (!this.props.roomId) return {};
+        var cli = MatrixClientPeg.get();
+        var room = cli.getRoom(this.props.roomId);
+        if (!room) return {};
+
+        var all_members = room.currentState.members;
+
+        // XXX: evil hack until SYJS-28 is fixed
+        Object.keys(all_members).map(function(userId) {
+            if (all_members[userId].user && !all_members[userId].user.lastPresenceTs) {
+                all_members[userId].user.lastPresenceTs = Date.now();
+            }
+        });
+
+        return all_members;
+    },
+
+    roomMembers: function(limit) {
+        var all_members = this.memberDict || {};
+        var all_user_ids = Object.keys(all_members);
+
+        if (this.memberSort) all_user_ids.sort(this.memberSort);
+
+        var to_display = [];
+        var count = 0;
+        for (var i = 0; i < all_user_ids.length && (limit === undefined || count < limit); ++i) {
+            var user_id = all_user_ids[i];
+            var m = all_members[user_id];
+
+            if (m.membership == 'join' || m.membership == 'invite') {
+                to_display.push(user_id);
+                ++count;
+            }
+        }
+        return to_display;
+    },
+
+
+
+    memberSort: function(userIdA, userIdB) {
+        var userA = this.memberDict[userIdA].user;
+        var userB = this.memberDict[userIdB].user;
+
+        var presenceMap = {
+            online: 3,
+            unavailable: 2,
+            offline: 1
+        };
+
+        var presenceOrdA = userA ? presenceMap[userA.presence] : 0;
+        var presenceOrdB = userB ? presenceMap[userB.presence] : 0;
+
+        if (presenceOrdA != presenceOrdB) {
+            return presenceOrdB - presenceOrdA;
+        }
+
+        var latA = userA ? (userA.lastPresenceTs - (userA.lastActiveAgo || userA.lastPresenceTs)) : 0;
+        var latB = userB ? (userB.lastPresenceTs - (userB.lastActiveAgo || userB.lastPresenceTs)) : 0;
+
+        return latB - latA;
+    },
+
+    makeMemberTiles: function(membership) {
+        var MemberTile = sdk.getComponent("rooms.MemberTile");
+
+        var self = this;
+        return self.state.members.filter(function(userId) {
+            var m = self.memberDict[userId];
+            return m.membership == membership;
+        }).map(function(userId) {
+            var m = self.memberDict[userId];
+            return (
+                <MemberTile key={userId} member={m} ref={userId} />
+            );
+        });
+    },
+
+    onPopulateInvite: function(e) {
+        this.onInvite(this.refs.invite.value);
+        e.preventDefault();
+    },
+
+    inviteTile: function() {
+        if (this.state.inviting) {
+            var Loader = sdk.getComponent("elements.Spinner");
+            return (
+                <Loader />
+            );
+        } else {
+            return (
+                <form onSubmit={this.onPopulateInvite}>
+                    <input className="mx_MemberList_invite" ref="invite" placeholder="Invite another user"/>
+                </form>
+            );
+        }
+    },
+
+    render: function() {
+        var invitedSection = null;
+        var invitedMemberTiles = this.makeMemberTiles('invite');
+        if (invitedMemberTiles.length > 0) {
+            invitedSection = (
+                <div className="mx_MemberList_invited">
+                    <h2>Invited</h2>
+                    <div className="mx_MemberList_wrapper">
+                        {invitedMemberTiles}
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="mx_MemberList">
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_border">
+                    {this.inviteTile()}
+                    <div>
+                        <div className="mx_MemberList_wrapper">
+                            {this.makeMemberTiles('join')}
+                        </div>
+                    </div>
+                    {invitedSection}
+                </GeminiScrollbar>
+            </div>
+        );
+    }
+});
+

src/components/views/rooms/MemberTile.js

@@ -31,7 +31,7 @@ module.exports = React.createClass({
     },
 
     onLeaveClick: function() {
-        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         var roomId = this.props.member.roomId;
         Modal.createDialog(QuestionDialog, {

src/components/views/rooms/MessageComposer.js

@@ -272,7 +272,7 @@ module.exports = React.createClass({
                 this.markdownEnabled = false;
             }
             else {
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Unknown command",
                     description: "Usage: /markdown on|off"
@@ -292,7 +292,7 @@ module.exports = React.createClass({
                     console.log("Command success.");
                 }, function(err) {
                     console.error("Command failure: %s", err);
-                    var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
                         title: "Server error",
                         description: err.message
@@ -301,7 +301,7 @@ module.exports = React.createClass({
             }
             else if (cmd.error) {
                 console.error(cmd.error);
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Command error",
                     description: cmd.error

src/components/views/rooms/RoomList.js

@@ -0,0 +1,303 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+var React = require("react");
+var ReactDOM = require("react-dom");
+var GeminiScrollbar = require('react-gemini-scrollbar');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var RoomListSorter = require("../../../RoomListSorter");
+var dis = require("../../../dispatcher");
+var sdk = require('../../../index');
+
+var HIDE_CONFERENCE_CHANS = true;
+
+module.exports = React.createClass({
+    displayName: 'RoomList',
+
+    propTypes: {
+        ConferenceHandler: React.PropTypes.any, // e.g. VectorConferenceHandler
+        collapsed: React.PropTypes.bool,
+        currentRoom: React.PropTypes.string
+    },
+
+    getInitialState: function() {
+        return {
+            activityMap: null,
+            lists: {},
+        }
+    },
+
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("Room", this.onRoom);
+        cli.on("Room.timeline", this.onRoomTimeline);
+        cli.on("Room.name", this.onRoomName);
+        cli.on("Room.tags", this.onRoomTags);
+        cli.on("RoomState.events", this.onRoomStateEvents);
+        cli.on("RoomMember.name", this.onRoomMemberName);
+
+        var s = this.getRoomLists();
+        s.activityMap = {};
+        this.setState(s);
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'view_tooltip':
+                this.tooltip = payload.tooltip;
+                this._repositionTooltip();
+                if (this.tooltip) this.tooltip.style.display = 'block';
+                break
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room", this.onRoom);
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.state.activityMap[newProps.selectedRoom] = undefined;
+        this.setState({
+            activityMap: this.state.activityMap
+        });
+    },
+
+    onRoom: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (toStartOfTimeline) return;
+
+        var hl = 0;
+        if (
+            room.roomId != this.props.selectedRoom &&
+            ev.getSender() != MatrixClientPeg.get().credentials.userId)
+        {
+            // don't mark rooms as unread for just member changes
+            if (ev.getType() != "m.room.member") {
+                hl = 1;
+            }
+
+            var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+            if (actions && actions.tweaks && actions.tweaks.highlight) {
+                hl = 2;
+            }
+        }
+
+        if (hl > 0) {
+            var newState = this.getRoomLists();
+
+            // obviously this won't deep copy but this shouldn't be necessary
+            var amap = this.state.activityMap;
+            amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
+
+            newState.activityMap = amap;
+
+            this.setState(newState);
+        }
+    },
+
+    onRoomName: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomTags: function(event, room) {
+        this.refreshRoomList();        
+    },
+
+    onRoomStateEvents: function(ev, state) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
+    onRoomMemberName: function(ev, member) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
+    refreshRoomList: function() {
+        // TODO: rather than bluntly regenerating and re-sorting everything
+        // every time we see any kind of room change from the JS SDK
+        // we could do incremental updates on our copy of the state
+        // based on the room which has actually changed.  This would stop
+        // us re-rendering all the sublists every time anything changes anywhere
+        // in the state of the client.
+        this.setState(this.getRoomLists());
+    },
+
+    getRoomLists: function() {
+        var self = this;
+        var s = { lists: {} };
+
+        s.lists["m.invite"] = [];
+        s.lists["m.favourite"] = [];
+        s.lists["m.recent"] = [];
+        s.lists["m.lowpriority"] = [];
+        s.lists["m.archived"] = [];
+
+        MatrixClientPeg.get().getRooms().forEach(function(room) {
+            var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+
+            if (me && me.membership == "invite") {
+                s.lists["m.invite"].push(room);
+            }
+            else {
+                var shouldShowRoom =  (
+                    me && (me.membership == "join")
+                );
+
+                // hiding conf rooms only ever toggles shouldShowRoom to false
+                if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
+                    // we want to hide the 1:1 conf<->user room and not the group chat
+                    var joinedMembers = room.getJoinedMembers();
+                    if (joinedMembers.length === 2) {
+                        var otherMember = joinedMembers.filter(function(m) {
+                            return m.userId !== me.userId
+                        })[0];
+                        var ConfHandler = self.props.ConferenceHandler;
+                        if (ConfHandler && ConfHandler.isConferenceUser(otherMember)) {
+                            // console.log("Hiding conference 1:1 room %s", room.roomId);
+                            shouldShowRoom = false;
+                        }
+                    }
+                }
+
+                if (shouldShowRoom) {
+                    var tagNames = Object.keys(room.tags);
+                    if (tagNames.length) {
+                        for (var i = 0; i < tagNames.length; i++) {
+                            var tagName = tagNames[i];
+                            s.lists[tagName] = s.lists[tagName] || [];
+                            s.lists[tagNames[i]].push(room);
+                        }
+                    }
+                    else {
+                        s.lists["m.recent"].push(room); 
+                    }
+                }
+            }
+        });
+
+        //console.log("calculated new roomLists; m.recent = " + s.lists["m.recent"]);
+
+        // we actually apply the sorting to this when receiving the prop in RoomSubLists.
+
+        return s;
+    },
+
+    _repositionTooltip: function(e) {
+        if (this.tooltip && this.tooltip.parentElement) {
+            var scroll = ReactDOM.findDOMNode(this);
+            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px"; 
+        }
+    },
+
+    onShowClick: function() {
+        dis.dispatch({
+            action: 'show_left_panel',
+        });
+    },
+
+    render: function() {
+        var expandButton = this.props.collapsed ? 
+                           <img className="mx_RoomList_expandButton" onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
+                           null;
+
+        var RoomSubList = sdk.getComponent('organisms.RoomSubList');
+        var self = this;
+
+        return (
+            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={self._repositionTooltip}>
+            <div className="mx_RoomList">
+                { expandButton }
+
+                <RoomSubList list={ self.state.lists['m.invite'] }
+                             label="Invites"
+                             editable={ false }
+                             order="recent"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.favourite'] }
+                             label="Favourites"
+                             tagName="m.favourite"
+                             verb="favourite"
+                             editable={ true }
+                             order="manual"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.recent'] }
+                             label="Conversations"
+                             editable={ true }
+                             verb="restore"
+                             order="recent"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                { Object.keys(self.state.lists).map(function(tagName) {
+                    if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
+                        return <RoomSubList list={ self.state.lists[tagName] }
+                             key={ tagName }
+                             label={ tagName }
+                             tagName={ tagName }
+                             verb={ "tag as " + tagName }
+                             editable={ true }
+                             order="manual"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                    }
+                }) }
+
+                <RoomSubList list={ self.state.lists['m.lowpriority'] }
+                             label="Low priority"
+                             tagName="m.lowpriority"
+                             verb="demote"
+                             editable={ true }
+                             order="recent"
+                             bottommost={ self.state.lists['m.archived'].length === 0 }
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.archived'] }
+                             label="Historical"
+                             editable={ false }
+                             order="recent"
+                             bottommost={ true }
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+            </div>
+            </GeminiScrollbar>
+        );
+    }
+});

src/components/views/settings/EnableNotificationsButton.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 var React = require("react");
+var Notifier = require("../../../Notifier");
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 
@@ -38,12 +39,10 @@ module.exports = React.createClass({
     },
 
     enabled: function() {
-        var Notifier = sdk.getComponent('organisms.Notifier');
         return Notifier.isEnabled();
     },
 
     onClick: function() {
-        var Notifier = sdk.getComponent('organisms.Notifier');
         var self = this;
         if (!Notifier.supportsDesktopNotifications()) {
             return;