untested WIP for supporting multiple widgets properly

src/ScalarAuthClient.js

@@ -76,10 +76,13 @@ class ScalarAuthClient {
         return defer.promise;
     }
 
-    getScalarInterfaceUrlForRoom(roomId, screen) {
+    getScalarInterfaceUrlForRoom(roomId, screen, id) {
         var url = SdkConfig.get().integrations_ui_url;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);
         url += "&room_id=" + encodeURIComponent(roomId);
+        if (id) {
+            url += '&integ_id=' + id;
+        }
         if (screen) {
             url += '&screen=' + encodeURIComponent(screen);
         }

src/components/views/elements/AppTile.js

@@ -122,7 +122,7 @@ export default React.createClass({
     _onEditClick: function(e) {
         console.log("Edit widget ID ", this.props.id);
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        const src = this._scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'type_' + this.props.type);
+        const src = this._scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'type_' + this.props.type, this.props.id);
         Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
             src: src,
         }, "mx_IntegrationsManager");

src/components/views/rooms/AuxPanel.js

@@ -129,7 +129,10 @@ module.exports = React.createClass({
         );
 
         let appsDrawer = null;
+        let appCount = 0;
         if(UserSettingsStore.isFeatureEnabled('matrix_apps') && this.props.showApps) {
+            const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets');
+            if (appsStateEvents) appCount = appsStateEvents.length;
             appsDrawer = <AppsDrawer ref="appsDrawer"
                 room={this.props.room}
                 userId={this.props.userId}
@@ -137,7 +140,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className={ appsDrawer ? "mx_RoomView_auxPanel mx_RoomView_auxPanel_apps" : "mx_RoomView_auxPanel" } style={{maxHeight: this.props.maxHeight}} >
+            <div className={ appCount == 2 ? "mx_RoomView_auxPanel mx_RoomView_auxPanel_wide" : "mx_RoomView_auxPanel" } style={{maxHeight: this.props.maxHeight}} >
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }