launch: place group invitations in header

pkg/interface/launch/src/js/components/header.js

@@ -1,8 +1,50 @@
 import React, { Component } from 'react';
 import { Sigil } from './sigil';
+import _ from 'lodash';
 
 export default class Header extends Component {
   render() {
+
+    let data = _.get(this.props.data, "invites", false);
+    let inviteNum = 0;
+
+    if (data && "/contacts" in data) {
+      inviteNum = Object.keys(data["/contacts"]).length;
+    }
+
+    let numNotificationsElem =
+      inviteNum > 0 ? (
+        <a href="/~groups">
+          <p
+            className="absolute ph1 br2 ba b--gray2 green2 white-d f9 lh-solid"
+            title={"Invitations to new groups"}
+            style={{
+              bottom: "-2",
+              fontWeight: 600,
+              fontSize: "8pt",
+              padding: "0.15rem 0.4rem",
+              right: 64
+            }}>
+            {inviteNum > 99 ? "99+" : inviteNum}
+          </p>
+        </a>
+      ) : (
+        <a href="/~groups">
+          <p
+            className="absolute ph1 br2 ba b--gray2 gray2 white-d f9 lh-solid"
+            title={"No new invitations to new groups"}
+            style={{
+              bottom: "-2",
+              fontWeight: 600,
+              fontSize: "8pt",
+              padding: "0.15rem 0.4rem",
+              right: 64
+            }}>
+            0
+            </p>
+          </a>
+        );
+
     return (
       <header
         className="bg-white bg-gray0-d w-100 justify-between relative tc pt3"
@@ -16,6 +58,7 @@ export default class Header extends Component {
           Home
         </span>
         <div className="absolute right-1 lh-copy" style={{ top: 12 }}>
+          {numNotificationsElem}
           <Sigil
             ship={"~" + window.ship}
             size={16} color={"#000000"}

pkg/interface/launch/src/js/components/home.js

@@ -28,9 +28,14 @@ export default class Home extends Component {
       return <Tile key={tile} type={tile} data={tileData} />;
     });
 
+    let headerData = {};
+    if ("invites" in this.props.data) {
+      headerData["invites"] = this.props.data["invites"];
+    }
+
     return (
       <div className="fl w-100 h-100 bg-white bg-gray0-d center">
-        <Header />
+        <Header data={headerData}/>
         <div className={"v-mid pa2 dtc-m dtc-l dtc-xl " +
         "flex justify-between flex-wrap"}
         style={{maxWidth: "40rem"}}>