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,12 +31,18 @@ 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}
@@ -51,5 +60,7 @@ export const ProfileStatus = (props) => {
           }}
         />
       </Row>
+      <Text display={notice !== ' ' ? 'block' : 'none'} mt={1} ml={1} whiteSpace="pre" gray>{notice}</Text>
+    </>
   );
 };