chat fe: support groupify operation

pkg/interface/chat/src/js/api.js

@@ -24,6 +24,7 @@ class UrbitApi {
       create: this.chatViewCreate.bind(this),
       delete: this.chatViewDelete.bind(this),
       join: this.chatViewJoin.bind(this),
+      groupify: this.chatViewGroupify.bind(this)
     };
 
     this.chatHook = {
@@ -174,6 +175,10 @@ class UrbitApi {
     });
   }
 
+  chatViewGroupify(path) {
+    return this.chatViewAction({ groupify: { 'app-path': path } });
+  }
+
   inviteAction(data) {
     this.action("invite-store", "json", data);
   }

pkg/interface/chat/src/js/components/root.js

@@ -259,6 +259,11 @@ export class Root extends Component {
 
               let popout = props.match.url.includes("/popout/");
 
+              let permission = state.permissions[station] || {
+                kind: "",
+                who: new Set([])
+              };
+              
               let association =
                 station in associations["chat"] ? associations.chat[station] : {};
 
@@ -274,6 +279,7 @@ export class Root extends Component {
                     {...props}
                     station={station}
                     association={association}
+                    permission={permission}
                     api={api}
                     station={station}
                     group={group}

pkg/interface/chat/src/js/components/settings.js

@@ -76,7 +76,22 @@ export class SettingsScreen extends Component {
     props.api.setSpinner(true);
 
     this.setState({
-      isLoading: true
+      isLoading: true,
+      loadingText: (deSig(props.match.params.ship) === window.ship)
+        ? 'Deleting...'
+        : 'Leaving...'
+    });
+  }
+
+  groupifyChat() {
+    const { props, state } = this;
+
+    props.api.chatView.groupify(props.station);
+    props.api.setSpinner(true);
+
+    this.setState({
+      isLoading: true,
+      loadingText: 'Converting...'
     });
   }
 
@@ -106,6 +121,33 @@ export class SettingsScreen extends Component {
     );
   }
 
+  renderGroupify() {
+    const { props, state } = this;
+
+    const chatOwner = (deSig(props.match.params.ship) === window.ship);
+    console.log(chatOwner, props.match.params.ship, window.ship);
+
+    const ownedUnmanagedVillage =
+      chatOwner &&
+      props.station.slice(0, 3) === '/~/' &&
+      props.permission.kind === 'white';
+
+    if (!ownedUnmanagedVillage) {
+      return null;
+    } else {
+      return (
+        <div>
+          <div className={"w-100 fl mt3 "}>
+            <p className="f8 mt3 lh-copy db">Convert Chat</p>
+            <p className="f9 gray2 db mb4">Convert this chat into a group + associated chat.</p>
+            <a onClick={this.groupifyChat.bind(this)}
+               className={"dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d pointer"}>Convert to group</a>
+          </div>
+        </div>
+      );
+    }
+  }
+
   renderMetadataSettings() {
     const { props, state } = this;
 
@@ -210,10 +252,7 @@ export class SettingsScreen extends Component {
     let writeGroup = Array.from(props.group.values());
 
     if (!!state.isLoading) {
-      let text = "Deleting...";
+      let text = state.loadingText || 'Working...';
-      if (deSig(props.match.params.ship) !== window.ship) {
-        text = "Leaving...";
-      }
 
       let title = props.station.substr(1);
 
@@ -321,6 +360,7 @@ export class SettingsScreen extends Component {
               </span>
             </div>
           </div>
+          {this.renderGroupify()}
           {this.renderDelete()}
           {this.renderMetadataSettings()}
         </div>