From 7ce67a2b4605ebb546627b2d6e4781608536e8e3 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Fri, 4 Jun 2021 12:22:17 +1000
Subject: [PATCH] leap: display chording options

---
 pkg/interface/src/logic/lib/omnibox.js        | 10 +++--
 .../src/views/components/leap/Omnibox.tsx     |  9 +++--
 .../views/components/leap/OmniboxResult.tsx   | 39 ++++++++++++++++---
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index a00322350..1870db33f 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -11,19 +11,23 @@ const makeIndexes = () => new Map([
   ]);
 
 // result schematic
-const result = function(title, link, app, host) {
+const result = function(title, link, app, host, description = 'Open', shiftLink = null, shiftDescription = null) {
   return {
     'title': title,
     'link': link,
     'app': app,
-    'host': host
+    'host': host,
+    'description': description,
+    'shiftLink': shiftLink,
+    'shiftDescription': shiftDescription
+
   };
 };
 
 const shipIndex = function(contacts) {
   const ships = [];
   Object.keys(contacts).map((e) => {
-    return ships.push(result(e, `/~profile/${e}`, 'profile', contacts[e]?.status || ''));
+    return ships.push(result(e, `/~profile/${e}`, 'profile', contacts[e]?.status || '', 'Open Profile', `/~landscape/messages/dm/${e}`, 'Send Message'));
   });
   return ships;
 };
diff --git a/pkg/interface/src/views/components/leap/Omnibox.tsx b/pkg/interface/src/views/components/leap/Omnibox.tsx
index 5fdb1d9f1..c2500bf70 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.tsx
+++ b/pkg/interface/src/views/components/leap/Omnibox.tsx
@@ -329,7 +329,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
               );
             const sel = selected?.length ? selected[1] : '';
             return (
-              <Box key={i} width='max(50vw, 300px)' maxWidth='600px'>
+              <Box key={i} width='max(50vw, 300px)' maxWidth='700px'>
                 {categoryTitle}
                 {categoryResults.sort(sortResults).map((result, i2) => (
                   <OmniboxResult
@@ -338,6 +338,9 @@ export function Omnibox(props: OmniboxProps): ReactElement {
                     icon={result.app}
                     text={result.title}
                     subtext={result.host}
+                    shiftLink={result.shiftLink}
+                    shiftDescription={result.shiftDescription}
+                    description={result.description}
                     link={result.link}
                     cursor={leapCursor}
                     navigate={() => navigate(result.app, result.link, false)}
@@ -366,9 +369,9 @@ export function Omnibox(props: OmniboxProps): ReactElement {
       >
         <Row justifyContent='center'>
           <Box
-            mt={['10vh', '20vh']}
+            mt={['10vh', '15vh']}
             width='max(50vw, 300px)'
-            maxWidth='600px'
+            maxWidth='700px'
             borderRadius={2}
             backgroundColor='white'
             ref={(el) => {
diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.tsx b/pkg/interface/src/views/components/leap/OmniboxResult.tsx
index 8b1ce26ae..1f85914da 100644
--- a/pkg/interface/src/views/components/leap/OmniboxResult.tsx
+++ b/pkg/interface/src/views/components/leap/OmniboxResult.tsx
@@ -11,6 +11,22 @@ import useHarkState from '~/logic/state/hark';
 import useLaunchState from '~/logic/state/launch';
 import useInviteState from '~/logic/state/invite';
 
+function OmniboxResultChord(props: {
+  label: string;
+  modifier?: string;
+
+}) {
+  const { label, modifier } = props;
+
+  return (
+    <Text display={['none', 'inline']} color="white" ml="2">
+      {label}
+      { modifier ? (<Text display="inline-block" ml="1" p="1" borderRadius="1" color="blue" backgroundColor="white">{modifier}</Text>) : null}
+      <Text display="inline-block" ml="1" color="blue" borderRadius="1" p="1" backgroundColor="white">↩</Text>
+    </Text>
+  );
+}
+
 interface OmniboxResultProps {
   contacts: Contacts;
   cursor: string;
@@ -24,6 +40,7 @@ interface OmniboxResultProps {
   setSelection: () =>  void;
   subtext: string;
   text: string;
+  shift?: string;
 }
 
 interface OmniboxResultState {
@@ -230,7 +247,10 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
       notificationsCount,
       runtimeLag,
       contacts,
-      setSelection
+      setSelection,
+      shiftDescription,
+      description = 'Go',
+      shiftLink
     } = this.props;
 
     const color = contacts?.[text]
@@ -249,8 +269,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
 
     return (
       <Row
-        py={2}
-        px={2}
+        p={1}
         cursor={cursor}
         onMouseMove={() => setSelection()}
         onMouseLeave={() => this.setHover(false)}
@@ -259,6 +278,8 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
         }
         onClick={navigate}
         width='100%'
+        height="32px"
+        alignItems="center"
         justifyContent='space-between'
         // @ts-ignore indigo-react doesn't allow us to pass refs
         ref={this.result}
@@ -284,8 +305,9 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
             {text.startsWith('~') ? cite(text) : text}
           </Text>
         </Box>
+
         <Text
-          pr={2}
+          pr={1}
           display='inline-block'
           verticalAlign='middle'
           color={this.state.hovered || selected === link ? 'white' : 'black'}
@@ -294,10 +316,15 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           textOverflow='ellipsis'
           whiteSpace='pre'
           overflow='hidden'
-          maxWidth='40%'
+          maxWidth='60%'
           textAlign='right'
         >
-          {subtext}
+          {(selected === link) ? (
+            <>
+              <OmniboxResultChord label={description} />
+              {(shiftLink && shiftDescription) ? (<OmniboxResultChord label={shiftDescription} modifier="Shift" />) : null}
+            </>
+          ) : subtext}
         </Text>
       </Row>
     );