leap: add contacts searching

pkg/interface/src/logic/lib/omnibox.js

@@ -1,6 +1,7 @@
 import { cite } from '~/logic/lib/util';
 
   const indexes = new Map([
+    ['ships', []],
     ['commands', []],
     ['subscriptions', []],
     ['groups', []],
@@ -18,6 +19,14 @@ const result = function(title, link, app, host) {
   };
 };
 
+const shipIndex = function(contacts) {
+  const ships = [];
+  Object.keys(contacts).map((e) => {
+    return ships.push(result(e, `/~profile/${e}`, 'profile', contacts[e]?.status));
+  });
+  return ships;
+};
+
 const commandIndex = function (currentGroup) {
   // commands are special cased for default suite
   const commands = [];
@@ -62,7 +71,8 @@ const otherIndex = function() {
   return other;
 };
 
-export default function index(associations, apps, currentGroup, groups) {
+export default function index(contacts, associations, apps, currentGroup, groups) {
+  indexes.set('ships', shipIndex(contacts));
   // all metadata from all apps is indexed
   // into subscriptions and landscape
   const subscriptions = [];

pkg/interface/src/views/App.js

@@ -139,9 +139,6 @@ class App extends React.Component {
     const doNotDisturb = state.doNotDisturb || false;
     const ourContact = this.state.contacts[this.ship] || null;
 
-    const showBanner = localStorage.getItem("2020BreachBanner") || "flex";
-    let banner = null;
-
     return (
       <ThemeProvider theme={theme}>
         <Helmet>
@@ -170,6 +167,7 @@ class App extends React.Component {
                 associations={state.associations}
                 apps={state.launch}
                 api={this.api}
+                contacts={state.contacts}
                 notifications={state.notificationsCount}
                 invites={state.invites}
                 groups={state.groups}

pkg/interface/src/views/components/leap/Omnibox.js

@@ -32,7 +32,7 @@ export class Omnibox extends Component {
       const { pathname } = this.props.location;
       const selectedGroup = pathname.startsWith('/~landscape/ship/') ? '/' + pathname.split('/').slice(2,5).join('/') : null;
 
-      this.setState({ index: index(this.props.associations, this.props.apps.tiles, selectedGroup, this.props.groups) });
+      this.setState({ index: index(this.props.contacts, this.props.associations, this.props.apps.tiles, selectedGroup, this.props.groups) });
     }
 
     if (prevProps && (prevProps.apps !== this.props.apps) && (this.state.query === '')) {
@@ -56,7 +56,7 @@ export class Omnibox extends Component {
   }
 
   getSearchedCategories() {
-    return ['other', 'commands', 'groups', 'subscriptions', 'apps'];
+    return ['ships', 'other', 'commands', 'groups', 'subscriptions', 'apps'];
   }
 
   control(evt) {
@@ -249,6 +249,7 @@ export class Omnibox extends Component {
                 selected={selected}
                 invites={props.invites}
                 notifications={props.notifications}
+                contacts={props.contacts}
               />
             ))}
           </Box>

pkg/interface/src/views/components/leap/OmniboxResult.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Box, Row, Icon, Text } from '@tlon/indigo-react';
 import defaultApps from '~/logic/lib/default-apps';
 import Sigil from '~/logic/lib/sigil';
+import { uxToHex } from '~/logic/lib/util';
 
 export class OmniboxResult extends Component {
   constructor(props) {
@@ -25,9 +26,8 @@ export class OmniboxResult extends Component {
       }
   }
 
-  getIcon(icon, selected, link, invites, notifications) {
+  getIcon(icon, selected, link, invites, notifications, text, color) {
     const iconFill = (this.state.hovered || (selected === link)) ? 'white' : 'black';
-    const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
     const bulletFill = (this.state.hovered || (selected === link)) ? 'white' : 'blue';
 
     const inviteCount = [].concat(...Object.values(invites).map(obj => Object.values(obj)));
@@ -39,22 +39,23 @@ export class OmniboxResult extends Component {
     {
       icon = (icon === 'Link')     ? 'Collection' :
              (icon === 'Terminal') ? 'Dojo'  : icon;
-      graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='16px' color={iconFill} />;
+      graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='18px' color={iconFill} />;
     } else if (icon === 'inbox') {
       graphic = <Box display='flex' verticalAlign='middle' position="relative">
-        <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='16px' color={iconFill} />
+        <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='18px' color={iconFill} />
         {(notifications > 0 || inviteCount.length > 0) && (
           <Icon display='inline-block' icon='Bullet' style={{ position: 'absolute', top: -5, left: 5 }} color={bulletFill} />
         )}
       </Box>;
     } else if (icon === 'logout') {
-      graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='16px' color={iconFill} />;
+      graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='18px' color={iconFill} />;
     } else if (icon === 'profile') {
-      graphic = <Sigil color={sigilFill} classes='dib flex-shrink-0 v-mid mr2' ship={window.ship} size={16} icon padded />;
+      text = text.startsWith('Profile') ? window.ship : text;
+      graphic = <Sigil color={color} classes='dib flex-shrink-0 v-mid mr2' ship={text} size={18} icon padded />;
     } else if (icon === 'home') {
-      graphic = <Icon display='inline-block' verticalAlign='middle' icon='Mail' mr='2' size='16px' color={iconFill} />;
+      graphic = <Icon display='inline-block' verticalAlign='middle' icon='Mail' mr='2' size='18px' color={iconFill} />;
     } else if (icon === 'notifications') {
-      graphic = <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='16px' color={iconFill} />;
+      graphic = <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='18px' color={iconFill} />;
     } else {
       graphic = <Icon display='inline-block' icon='NullIcon' verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
     }
@@ -67,9 +68,10 @@ export class OmniboxResult extends Component {
   }
 
   render() {
-    const { icon, text, subtext, link, navigate, selected, invites, notifications } = this.props;
+    const { icon, text, subtext, link, navigate, selected, invites, notifications, contacts } = this.props;
 
-    const graphic = this.getIcon(icon, selected, link, invites, notifications);
+    const color = contacts?.[text] ? `#${uxToHex(contacts[text].color)}` : "#000000";
+    const graphic = this.getIcon(icon, selected, link, invites, notifications, text, color);
 
     return (
       <Row