ProfileScreen: Put status and set-your-status link in the same row

Before this, we were separating the line that showed the user's
status from the line that led to the UI to change the status (a
button linking to UserStatusScreen) -- with the "Invisible mode"
switch in between.

Now, it's a single NestedNavRow that shows the emoji and status
text, if any. Tapping it leads to the UserStatusScreen.

Also reword the user-status screen's title a bit to avoid the
awkward user-facing word "user":
  #5665 (comment)

Author: chrisbobbe

src/account-info/AccountDetails.js

@@ -44,6 +44,7 @@ const componentStyles = createStyleSheet({
 type Props = $ReadOnly<{|
   user: UserOrBot,
   showEmail: boolean,
+  showStatus: boolean,
 |}>;
 
 const getRoleText = (role: Role): LocalizableText => {
@@ -62,7 +63,7 @@ const getRoleText = (role: Role): LocalizableText => {
 };
 
 export default function AccountDetails(props: Props): Node {
-  const { user, showEmail } = props;
+  const { user, showEmail, showStatus } = props;
 
   const userStatusText = useSelector(state => getUserStatus(state, props.user.user_id).status_text);
   const userStatusEmoji = useSelector(
@@ -112,22 +113,24 @@ export default function AccountDetails(props: Props): Node {
           </View>
         )
       }
-      <View style={componentStyles.statusWrapper}>
-        {userStatusEmoji && (
-          <Emoji
-            code={userStatusEmoji.emoji_code}
-            type={emojiTypeFromReactionType(userStatusEmoji.reaction_type)}
-            size={24}
-          />
-        )}
-        {userStatusEmoji && userStatusText !== null && <View style={{ width: 2 }} />}
-        {userStatusText !== null && (
-          <ZulipText
-            style={[styles.largerText, componentStyles.statusText]}
-            text={userStatusText}
-          />
-        )}
-      </View>
+      {showStatus && (
+        <View style={componentStyles.statusWrapper}>
+          {userStatusEmoji && (
+            <Emoji
+              code={userStatusEmoji.emoji_code}
+              type={emojiTypeFromReactionType(userStatusEmoji.reaction_type)}
+              size={24}
+            />
+          )}
+          {userStatusEmoji && userStatusText !== null && <View style={{ width: 2 }} />}
+          {userStatusText !== null && (
+            <ZulipText
+              style={[styles.largerText, componentStyles.statusText]}
+              text={userStatusText}
+            />
+          )}
+        </View>
+      )}
     </ComponentList>
   );
 }

src/account-info/AccountDetailsScreen.js

@@ -74,7 +74,7 @@ export default function AccountDetailsScreen(props: Props): Node {
 
   return (
     <Screen title={title}>
-      <AccountDetails user={user} showEmail />
+      <AccountDetails user={user} showEmail showStatus />
       <View style={styles.itemWrapper}>
         <ActivityText style={globalStyles.largerText} user={user} />
       </View>

src/account-info/ProfileScreen.js

@@ -24,6 +24,8 @@ import { getUserStatus } from '../user-statuses/userStatusesModel';
 import SwitchRow from '../common/SwitchRow';
 import * as api from '../api';
 import { identityOfAccount } from '../account/accountMisc';
+import NestedNavRow from '../common/NestedNavRow';
+import { emojiTypeFromReactionType } from '../emoji/data';
 
 const styles = createStyleSheet({
   buttonRow: {
@@ -36,20 +38,6 @@ const styles = createStyleSheet({
   },
 });
 
-function SetStatusButton(props: {||}) {
-  const navigation = useNavigation();
-  return (
-    <ZulipButton
-      style={styles.button}
-      secondary
-      text="Set a status"
-      onPress={() => {
-        navigation.push('user-status');
-      }}
-    />
-  );
-}
-
 function ProfileButton(props: {| +ownUserId: UserId |}) {
   const navigation = useNavigation();
   return (
@@ -130,18 +118,39 @@ type Props = $ReadOnly<{|
  * The profile/settings/account screen we offer among the main tabs of the app.
  */
 export default function ProfileScreen(props: Props): Node {
+  const navigation = useNavigation();
+
   const auth = useSelector(getAuth);
   const zulipFeatureLevel = useSelector(getZulipFeatureLevel);
   const ownUser = useSelector(getOwnUser);
   const ownUserId = useSelector(getOwnUserId);
   const presenceEnabled = useSelector(state => getRealm(state).presenceEnabled);
   const awayStatus = useSelector(state => getUserStatus(state, ownUserId).away);
+  const userStatus = useSelector(state => getUserStatus(state, ownUserId));
+
+  const { status_emoji, status_text } = userStatus;
 
   return (
     <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }}>
       <OfflineNoticePlaceholder />
       <ScrollView>
-        <AccountDetails user={ownUser} showEmail={false} />
+        <AccountDetails user={ownUser} showEmail={false} showStatus={false} />
+        <NestedNavRow
+          leftElement={
+            status_emoji != null
+              ? {
+                  type: 'emoji',
+                  emojiCode: status_emoji.emoji_code,
+                  emojiType: emojiTypeFromReactionType(status_emoji.reaction_type),
+                }
+              : undefined
+          }
+          title="Set your status"
+          subtitle={status_text != null ? { text: '{_}', values: { _: status_text } } : undefined}
+          onPress={() => {
+            navigation.push('user-status');
+          }}
+        />
         {zulipFeatureLevel >= 148 ? (
           <SwitchRow
             label="Invisible mode"
@@ -162,9 +171,6 @@ export default function ProfileScreen(props: Props): Node {
             }}
           />
         )}
-        <View style={styles.buttonRow}>
-          <SetStatusButton />
-        </View>
         <View style={styles.buttonRow}>
           <ProfileButton ownUserId={ownUser.user_id} />
         </View>

static/translations/messages_en.json

@@ -334,7 +334,6 @@
   "See who reacted": "See who reacted",
   "Muted user": "Muted user",
   "Only organization admins are allowed to post to this stream.": "Only organization admins are allowed to post to this stream.",
-  "Set a status": "Set a status",
   "Connecting...": "Connecting...",
   "Set your status": "Set your status",
   "Muted": "Muted",