Merge pull request #4416 from urbit/la/mini-prof

interface: mini profile does not dismiss improperly on click, and shows success indicator when status is set

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -294,7 +294,9 @@ export const MessageWithSigil = (props) => {
   return (
     <>
       <Box
-        onClick={() => toggleOverlay()}
+        onClick={() => {
+          setShowOverlay(true);
+        }}
         className='fl v-top pt1'
         height={16}
         pr={3}
@@ -311,6 +313,7 @@ export const MessageWithSigil = (props) => {
             history={history}
             className='relative'
             scrollWindow={scrollWindow}
+            api={api}
           />
         )}
         {img}

pkg/interface/src/views/components/ProfileStatus.js

@@ -8,12 +8,15 @@ import {
   Row,
   Button,
   StatelessTextInput as Input,
+  Text
 } from "@tlon/indigo-react";
 
 
 export const ProfileStatus = (props) => {
   const { contact, ship, api, callback } = props;
   const [_status, setStatus] = useState('');
+  const [notice, setNotice] = useState(' ');
+
   const onStatusChange = useCallback(
     (e) => {
       setStatus(e.target.value);
@@ -28,28 +31,36 @@ export const ProfileStatus = (props) => {
   const editStatus = () => {
     api.contacts.edit(ship, {status: _status});
 
+    setNotice('Success!');
+    setTimeout(() => {
+      setNotice(' ');
+    }, 1000);
+
     if (callback) {
       callback();
     }
   };
 
   return (
-    <Row width="100%" mt={3} mr={3} display="block">
-      <Input
-        onChange={onStatusChange}
-        value={_status}
-        autocomplete="off"
-        width="100%"
-        placeholder="Set Status"
-        onKeyPress={(evt) => {
-          if (evt.key === 'Enter') {
+    <>
+      <Row width="100%" mt={3} mr={3} display="block">
+        <Input
+          onChange={onStatusChange}
+          value={_status}
+          autocomplete="off"
+          width="100%"
+          placeholder="Set Status"
+          onKeyPress={(evt) => {
+            if (evt.key === 'Enter') {
+              editStatus();
+            }
+          }}
+          onBlur={() => {
             editStatus();
-          }
-        }}
-        onBlur={() => {
-          editStatus();
-        }}
-      />
-    </Row>
+          }}
+        />
+      </Row>
+      <Text display={notice !== ' ' ? 'block' : 'none'} mt={1} ml={1} whiteSpace="pre" gray>{notice}</Text>
+    </>
   );
 };