chat fe: support adding chat to existing group

Using the updated chat-view %groupify action. Groupifying without
selecting a group creates a new group based off the chat. Selecting a
group first makes that the target of the group, and allows you to
specify whether to merge ships from the chat into the group.

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

@@ -175,8 +175,15 @@ class UrbitApi {
     });
   }
 
-  chatViewGroupify(path) {
-    return this.chatViewAction({ groupify: { 'app-path': path } });
+  chatViewGroupify(path, group = null, inclusive = false) {
+    let action = { groupify: { 'app-path': path, existing: null } };
+    if (group) {
+      action.groupify.existing = {
+        'group-path': group,
+        inclusive: inclusive
+      }
+    }
+    return this.chatViewAction(action);
   }
 
   inviteAction(data) {

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

@@ -280,6 +280,9 @@ export class Root extends Component {
                     station={station}
                     association={association}
                     permission={permission}
+                    groups={state.groups || {}}
+                    contacts={state.contacts || {}}
+                    associations={associations.contacts}
                     api={api}
                     station={station}
                     group={group}

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

@@ -5,6 +5,7 @@ import { Route, Link } from "react-router-dom";
 
 
 import { ChatTabBar } from '/components/lib/chat-tabbar';
+import { InviteSearch } from '/components/lib/invite-search';
 import SidebarSwitcher from './lib/icons/icon-sidebar-switch';
 
 
@@ -16,10 +17,15 @@ export class SettingsScreen extends Component {
       isLoading: false,
       title: "",
       description: "",
-      color: ""
+      color: "",
+      // groupify settings
+      targetGroup: null,
+      inclusive: false
     };
 
     this.renderDelete = this.renderDelete.bind(this);
+    this.changeTargetGroup = this.changeTargetGroup.bind(this);
+    this.changeInclusive = this.changeInclusive.bind(this);
     this.changeTitle = this.changeTitle.bind(this);
     this.changeDescription = this.changeDescription.bind(this);
     this.changeColor = this.changeColor.bind(this);
@@ -58,6 +64,18 @@ export class SettingsScreen extends Component {
     }
   }
 
+  changeTargetGroup(target) {
+    if (target.groups.length === 1) {
+      this.setState({ targetGroup: target.groups[0] });
+    } else {
+      this.setState({ targetGroup: null });
+    }
+  }
+
+  changeInclusive(event) {
+    this.setState({ inclusive: !!event.target.checked });
+  }
+
   changeTitle() {
     this.setState({title: event.target.value})
   }
@@ -122,7 +140,9 @@ export class SettingsScreen extends Component {
   groupifyChat() {
     const { props, state } = this;
 
-    props.api.chatView.groupify(props.station);
+    props.api.chatView.groupify(
+      props.station, state.targetGroup, state.inclusive
+    );
     props.api.setSpinner(true);
 
     this.setState({
@@ -171,15 +191,56 @@ export class SettingsScreen extends Component {
     if (!ownedUnmanagedVillage) {
       return null;
     } else {
+      let inclusiveToggle = <div/>
+      console.log('tg', state.targetGroup);
+      if (state.targetGroup) {
+        //TODO toggle component
+        let inclusiveClasses = state.inclusive
+          ? "relative checked bg-green2 br3 h1 toggle v-mid z-0"
+          : "relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0";
+        inclusiveToggle = (
+          <div className="mt4">
+            <input
+              type="checkbox"
+              style={{ WebkitAppearance: "none", width: 28 }}
+              className={inclusiveClasses}
+              onChange={this.changeInclusive}
+            />
+            <span className="dib f9 white-d inter ml3">
+              Inclusive
+            </span>
+            <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
+              Add chat members to the group if they aren't in it yet
+            </p>
+          </div>
+        );
+      }
+
       return (
         <div>
-          <div className={"w-100 fl mt3 "}>
+          <div className={"w-100 fl mt3"} style={{maxWidth: "29rem"}}>
             <p className="f8 mt3 lh-copy db">Convert Chat</p>
             <p className="f9 gray2 db mb4">
-              Convert this chat into a group with associated chat.
+              Convert this chat into a group with associated chat, or select a
+              group to add this chat to.
             </p>
+            <InviteSearch
+              groups={props.groups}
+              contacts={props.contacts}
+              associations={props.associations}
+              groupResults={true}
+              shipResults={false}
+              invites={{
+                groups: state.targetGroup ? [state.targetGroup] : [],
+                ships: []
+              }}
+              setInvite={this.changeTargetGroup}
+            />
+            {inclusiveToggle}
             <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>
+               className={"dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black b--gray1-d pointer"}>
+              Convert to group
+            </a>
           </div>
         </div>
       );