groups: set and surface group name metadata

pkg/interface/groups/src/js/api.js

@@ -68,12 +68,12 @@ class UrbitApi {
     return this.action("contact-view", "json", data);
   }
 
-  contactCreate(path, ships = []) {
+  contactCreate(path, ships = [], title) {
     return this.contactViewAction({
       create: {
         path,
         ships,
-        title: '',
+        title,
         description: ''
       }
     });

pkg/interface/groups/src/js/components/lib/group-sidebar.js

@@ -58,9 +58,17 @@ export class GroupSidebar extends Component {
       })
       .map((path) => {
         let name = path.substr(1);
-        let nameSeparator = name.indexOf("/");
-        name = name.substr(nameSeparator + 1);
-          let selected = (this.props.selected === path);
+        let selected = props.selected === path;
+        let groupChannel = `${path}/contacts${path}`
+        if (
+          props.associations[path] &&
+          props.associations[path][groupChannel].metadata
+        ) {
+          name =
+            props.associations[path][groupChannel].metadata.title !== ""
+              ? props.associations[path][groupChannel].metadata.title
+              : path.substr(1);
+        }
         return (
           <GroupItem
             key={path}

pkg/interface/groups/src/js/components/new.js

@@ -11,13 +11,13 @@ export class NewScreen extends Component {
 
     this.state = {
       groupName: '',
+      title: '',
       invites: {
         groups: [],
         ships: []
       },
       // color: '',
       groupNameError: false,
-      inviteError: false
     };
 
     this.groupNameChange = this.groupNameChange.bind(this);
@@ -25,8 +25,11 @@ export class NewScreen extends Component {
   }
 
   groupNameChange(event) {
+    let asciiSafe = event.target.value.toLowerCase()
+      .replace(/[^a-z0-9~_.-]/g, "-");
     this.setState({
-      groupName: event.target.value
+      groupName: asciiSafe,
+      title: event.target.value
     });
   }
 
@@ -39,14 +42,9 @@ export class NewScreen extends Component {
   onClickCreate() {
     const { props, state } = this;
 
-    let validChar = /^[a-z0-9~_.-]*$/;
-
-    if (
-      (!state.groupName) || (!validChar.test(state.groupName))
-    ) {
+    if (!state.groupName) {
       this.setState({
-        groupNameError: true,
-        inviteError: false
+        groupNameError: true
       });
       return;
     }
@@ -63,7 +61,7 @@ export class NewScreen extends Component {
       invites: ''
     }, () => {
       props.api.setSpinner(true);
-      let submit = props.api.contactView.create(group, aud);
+      let submit = props.api.contactView.create(group, aud, this.state.title);
       submit.then(() => {
         props.api.setSpinner(false);
         props.history.push(`/~groups${group}`);
@@ -76,36 +74,26 @@ export class NewScreen extends Component {
     if (this.state.groupNameError) {
       groupNameErrElem = (
         <span className="f9 inter red2 ml3 mt1 db">
-          Group must have a valid name.
+          Group must have a name.
         </span>
         );
     }
 
-    let invErrElem = (<span />);
-    if (this.state.inviteError) {
-    invErrElem = (
-      <span className="f9 inter red2 ml3 mb5 db">
-      Invites must be validly formatted ship names.
-      </span>
-      );
-    }
-
     return (
-      <div className="h-100 w-100 flex flex-column overflow-y-scroll white-d">
-        <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 pl3 pt3 f8">
+      <div className="h-100 w-100 mw6 pa3 pt4 overflow-x-hidden bg-gray0-d white-d flex flex-column">
+        <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
           <Link to="/~groups/">{"⟵ All Groups"}</Link>
         </div>
-        <div className="w-100 w-50-l w-50-xl mb4 pr6 pr0-l pr0-xl">
-          <h2 className="f8 pl3 pt4">Create New Group</h2>
-          <h2 className="f8 pl3 pt6">Group Name</h2>
-          <p className="f9 pl3 gray2 lh-copy">
-            Alphanumeric characters and hyphens only
-          </p>
+        <div className="w-100 mb4 pr6 pr0-l pr0-xl">
+          <h2 className="f8">Create New Group</h2>
+          <h2 className="f8 pt6">Group Name</h2>
           <textarea
-            className={"f7 bg-gray0-d white-d ba b--gray3 w-100 pa3 ml3 mt2 " +
-            "focus-b--black focus-b--white-d"}
+            className={
+              "f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 db w-100 mt2 " +
+              "focus-b--black focus-b--white-d"
+            }
             rows={1}
-            placeholder="example-group-name"
+            placeholder="Jazz Maximalists Research Unit"
             style={{
               resize: "none",
               height: 48,
@@ -114,9 +102,9 @@ export class NewScreen extends Component {
             onChange={this.groupNameChange}
           />
           {groupNameErrElem}
-          <h2 className="f8 pl3 pt6">Add Group Members</h2>
-          <p className="f9 pl3 gray2 lh-copy">Invite ships to your group</p>
-          <div className="relative pl3 pb6 mt2">
+          <h2 className="f8 pt6">Add Group Members</h2>
+          <p className="f9 gray2 lh-copy">Invite ships to your group</p>
+          <div className="relative pb6 mt2">
             <InviteSearch
               groups={this.props.groups}
               contacts={this.props.contacts}
@@ -127,7 +115,7 @@ export class NewScreen extends Component {
           </div>
           <button
             onClick={this.onClickCreate.bind(this)}
-            className="ml3 f8 ba pa2 b--green2 green2 pointer">
+            className="f8 ba pa2 b--green2 green2 pointer">
             Start Group
           </button>
           <Link to="/~groups">

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

@@ -49,7 +49,8 @@ export class Root extends Component {
                 api={api}
                 contacts={contacts}
                 groups={groups}
-                invites={invites}>
+                invites={invites}
+                associations={associations}>
                 <div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
                   <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
                     <p className="f9 pt3 gray2 w-100 h-100 dtc v-mid tc">
@@ -70,12 +71,14 @@ export class Root extends Component {
                   contacts={contacts}
                   groups={groups}
                   invites={invites}
+                  associations={associations}
                   activeDrawer="rightPanel">
                   <NewScreen
                     history={props.history}
                     groups={groups}
                     contacts={contacts}
-                    api={api} />
+                    api={api}
+                  />
                 </Skeleton>
               );
           }} />
@@ -97,21 +100,23 @@ export class Root extends Component {
                   invites={invites}
                   groups={groups}
                   activeDrawer={detail ? "detail" : "contacts"}
-                  selected={groupPath}>
-                    <ContactSidebar
-                      contacts={groupContacts}
-                      defaultContacts={defaultContacts}
-                      group={group}
-                      activeDrawer={detail ? "detail" : "contacts"}
-                      path={groupPath}
-                      {...props} />
-                      <GroupDetail
-                        associations={associations}
-                        path={groupPath}
-                        activeDrawer={detail ? "detail" : "contacts"}
-                        {...props}
-                      />
-                  </Skeleton>
+                  selected={groupPath}
+                  associations={associations}>
+                  <ContactSidebar
+                    contacts={groupContacts}
+                    defaultContacts={defaultContacts}
+                    group={group}
+                    activeDrawer={detail ? "detail" : "contacts"}
+                    path={groupPath}
+                    {...props}
+                  />
+                  <GroupDetail
+                    associations={associations}
+                    path={groupPath}
+                    activeDrawer={detail ? "detail" : "contacts"}
+                    {...props}
+                  />
+                </Skeleton>
               );
             }}
             />
@@ -131,14 +136,16 @@ export class Root extends Component {
                   groups={groups}
                   invites={invites}
                   activeDrawer="rightPanel"
-                  selected={groupPath}>
+                  selected={groupPath}
+                  associations={associations}>
                   <ContactSidebar
                     contacts={groupContacts}
                     defaultContacts={defaultContacts}
                     group={group}
                     activeDrawer="rightPanel"
                     path={groupPath}
-                    {...props} />
+                    {...props}
+                  />
                   <AddScreen
                     api={api}
                     groups={groups}
@@ -171,7 +178,8 @@ export class Root extends Component {
                   groups={groups}
                   invites={invites}
                   activeDrawer="rightPanel"
-                  selected={groupPath}>
+                  selected={groupPath}
+                  associations={associations}>
                   <ContactSidebar
                     activeDrawer="rightPanel"
                     contacts={groupContacts}
@@ -179,14 +187,16 @@ export class Root extends Component {
                     group={group}
                     path={groupPath}
                     selectedContact={shipPath}
-                    {...props} />
+                    {...props}
+                  />
                   <ContactCard
                     history={props.history}
                     contact={contact}
                     path={groupPath}
                     ship={window.ship}
                     share={true}
-                    rootIdentity={rootIdentity} />
+                    rootIdentity={rootIdentity}
+                  />
                 </Skeleton>
               );
             }} />
@@ -216,7 +226,8 @@ export class Root extends Component {
                   groups={groups}
                   invites={invites}
                   activeDrawer="rightPanel"
-                  selected={groupPath}>
+                  selected={groupPath}
+                  associations={associations}>
                   <ContactSidebar
                     activeDrawer="rightPanel"
                     contacts={groupContacts}
@@ -224,7 +235,8 @@ export class Root extends Component {
                     group={group}
                     path={groupPath}
                     selectedContact={shipPath}
-                    {...props} />
+                    {...props}
+                  />
                   <ContactCard
                     history={props.history}
                     contact={contact}
@@ -248,12 +260,14 @@ export class Root extends Component {
                   groups={groups}
                   invites={invites}
                   activeDrawer="rightPanel"
-                  selected="me">
-                <ContactCard
+                  selected="me"
+                  associations={associations}>
+                  <ContactCard
                     history={props.history}
                     path="/~/default"
                     contact={me}
-                    ship={window.ship} />
+                    ship={window.ship}
+                  />
                 </Skeleton>
               );
             }} />

pkg/interface/groups/src/js/components/skeleton.js

@@ -22,6 +22,7 @@ export class Skeleton extends Component {
             selected={props.selected}
             history={props.history}
             api={api}
+            associations={props.associations}
           />
           <div
             className={"h-100 w-100 " + rightPanelClasses}