interface: added ability to set status for profile

pkg/interface/src/views/apps/profile/components/EditProfile.tsx

@@ -83,13 +83,13 @@ export function EditProfile(props: any) {
   };
 
   return (
-    <Box width="100%">
+    <>
       <Formik
         validationSchema={formSchema}
         initialValues={contact || emptyContact}
         onSubmit={onSubmit}
       >
-      <Form width="100%" p={2}>
+      <Form width="100%" height="100%" p={2}>
         <Input id="nickname" label="Name" mb={3} />
         <Col width="100%">
           <Text mb={2}>Description</Text>
@@ -110,6 +110,6 @@ export function EditProfile(props: any) {
         </AsyncButton>
       </Form>
     </Formik>
-  </Box>
+  </>
   );
 }

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Sigil } from "~/logic/lib/sigil";
 import { ViewProfile } from './ViewProfile';
 import { EditProfile } from './EditProfile';
+import { SetStatus } from './SetStatus';
 
 import { uxToHex } from "~/logic/lib/util";
 import {
@@ -9,6 +10,8 @@ import {
   Box,
   Row,
   BaseImage,
+  StatelessTextInput as Input,
+  Button
 } from "@tlon/indigo-react";
 import useLocalState from "~/logic/state/local";
 import { useHistory } from "react-router-dom";
@@ -35,11 +38,14 @@ export function Profile(props: any) {
     <Center
       p={4}
       height="100%"
-      width="100%"
-      overflowY="auto">
+      width="100%">
       <Box
         maxWidth="600px"
         width="100%">
+        { ship === `~${window.ship}` ? (
+            <SetStatus ship={ship} contact={contact} api={props.api} />
+          ) : null
+        }
         <Row width="100%" height="300px">
           {cover}
         </Row>

pkg/interface/src/views/apps/profile/components/SetStatus.tsx

@@ -0,0 +1,57 @@
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  ChangeEvent
+} from "react";
+
+import {
+  Row,
+  Button,
+  StatelessTextInput as Input,
+} from "@tlon/indigo-react";
+
+
+export function SetStatus(props: any) {
+  const { contact, ship, api } = props;
+  const [_status, setStatus] = useState('');
+  const onStatusChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setStatus(e.target.value);
+    },
+    [setStatus]
+  );
+
+  useEffect(() => {
+    setStatus(!!contact ? contact.status : '');
+  }, [contact]);
+
+  const editStatus = () => {
+    api.contacts.edit(ship, {status: _status});
+  };
+
+  return (
+    <Row width="100%" my={3}>
+      <Input
+        onChange={onStatusChange}
+        value={_status}
+        autocomplete="off"
+        width="75%"
+        mr={2}
+        onKeyPress={(evt) => {
+          if (evt.key === 'Enter') {
+            editStatus();
+          }
+        }}
+      />
+      <Button
+        backgroundColor="black"
+        color="white"
+        ml={2}
+        width="25%"
+        onClick={editStatus}>
+        Set Status
+      </Button>
+    </Row>
+  );
+}

pkg/interface/src/views/apps/profile/profile.tsx

@@ -39,8 +39,10 @@ export default function ProfileScreen(props: any) {
               bg="white"
               border={1}
               borderColor="washedGray"
+              overflowY="auto"
+              flexGrow
             >
-              <Box overflowY="auto" flexGrow={1}>
+              <Box>
                 <Profile
                   ship={ship}
                   contact={contact}