NotificationsScreen: Label per-account settings as such

I could imagine someone seeing

- Notifications when offline
- Notifications when online
- Stream notifications

and wrongly thinking that they were device-level instead of
account-level. So, group these per-account settings together with a
header that identifies the account they apply to, with a link to the
pick-account screen in case the user wants to set these values on a
different account.

Author: chrisbobbe

src/settings/NotificationsScreen.js

@@ -7,7 +7,7 @@ import OpenNotification from 'react-native-open-notification';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import { useSelector } from '../react-redux';
+import { useGlobalSelector, useSelector } from '../react-redux';
 import { getAuth, getSettings } from '../selectors';
 import SwitchRow from '../common/SwitchRow';
 import Screen from '../common/Screen';
@@ -19,6 +19,10 @@ import { IconAlertTriangle } from '../common/Icons';
 import type { LocalizableText } from '../types';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { kWarningColor } from '../styles/constants';
+import { getIdentities, getIdentity, getIsActiveAccount } from '../account/accountsSelectors';
+import { getRealmName } from '../directSelectors';
+import ZulipText from '../common/ZulipText';
+import SettingsGroup from './SettingsGroup';
 
 const {
   ZLPConstants,
@@ -104,11 +108,22 @@ function openSystemNotificationSettings() {
   }
 }
 
-/** (NB this is a per-account screen -- these are per-account settings.) */
+/**
+ * Notification settings with warnings when something seems wrong.
+ *
+ * Includes an area for per-account settings.
+ */
 export default function NotificationsScreen(props: Props): Node {
+  const { navigation } = props;
+
   const _ = useContext(TranslationContext);
 
   const auth = useSelector(getAuth);
+  const identity = useSelector(getIdentity);
+  const otherAccounts = useGlobalSelector(state =>
+    getIdentities(state).filter(identity_ => !getIsActiveAccount(state, identity_)),
+  );
+  const realmName = useSelector(getRealmName);
   const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
   const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
   const streamNotification = useSelector(state => getSettings(state).streamNotification);
@@ -166,6 +181,10 @@ export default function NotificationsScreen(props: Props): Node {
     });
   }, [streamNotification, auth]);
 
+  const handleOtherAccountsPress = useCallback(() => {
+    navigation.push('account-pick');
+  }, [navigation]);
+
   return (
     <Screen title="Notifications">
       <ServerPushSetupBanner isDismissable={false} />
@@ -194,21 +213,34 @@ export default function NotificationsScreen(props: Props): Node {
         })()}
         onPress={handleSystemSettingsPress}
       />
-      <SwitchRow
-        label="Notifications when offline"
-        value={offlineNotification}
-        onValueChange={handleOfflineNotificationChange}
-      />
-      <SwitchRow
-        label="Notifications when online"
-        value={onlineNotification}
-        onValueChange={handleOnlineNotificationChange}
-      />
-      <SwitchRow
-        label="Stream notifications"
-        value={streamNotification}
-        onValueChange={handleStreamNotificationChange}
-      />
+      <SettingsGroup
+        title={{
+          text: 'Notification settings for this account ({email} in {realmName}):',
+          values: {
+            email: <ZulipText style={{ fontWeight: 'bold' }} text={identity.email} />,
+            realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
+          },
+        }}
+      >
+        <SwitchRow
+          label="Notifications when offline"
+          value={offlineNotification}
+          onValueChange={handleOfflineNotificationChange}
+        />
+        <SwitchRow
+          label="Notifications when online"
+          value={onlineNotification}
+          onValueChange={handleOnlineNotificationChange}
+        />
+        <SwitchRow
+          label="Stream notifications"
+          value={streamNotification}
+          onValueChange={handleStreamNotificationChange}
+        />
+      </SettingsGroup>
+      {otherAccounts.length > 0 && (
+        <NestedNavRow title="Other accounts" onPress={handleOtherAccountsPress} />
+      )}
     </Screen>
   );
 }

src/settings/SettingsGroup.js

@@ -0,0 +1,53 @@
+/* @flow strict-local */
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import SwitchRow from '../common/SwitchRow';
+import NestedNavRow from '../common/NestedNavRow';
+import type { LocalizableReactText } from '../types';
+import { createStyleSheet } from '../styles';
+import { QUARTER_COLOR } from '../styles/constants';
+import ZulipTextIntl from '../common/ZulipTextIntl';
+
+type Props = $ReadOnly<{|
+  /**
+   * The current style works best if this ends in a colon.
+   */
+  // The need to suggest a colon is probably a sign that we can improve the
+  // layout in some subtle way.
+  title: LocalizableReactText,
+
+  children: $ReadOnlyArray<React$Element<typeof SwitchRow> | React$Element<typeof NestedNavRow>>,
+|}>;
+
+export default function SettingsGroup(props: Props): React.Node {
+  const { title, children } = props;
+
+  const styles = React.useMemo(
+    () =>
+      createStyleSheet({
+        container: {
+          overflow: 'hidden',
+          backgroundColor: QUARTER_COLOR, // TODO: Better color
+          marginVertical: 4,
+        },
+        headerContainer: {
+          justifyContent: 'center',
+          paddingHorizontal: 16,
+          paddingVertical: 8,
+          minHeight: 48,
+        },
+      }),
+    [],
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <ZulipTextIntl text={title} />
+      </View>
+      {children}
+    </View>
+  );
+}

static/translations/messages_en.json

@@ -229,6 +229,8 @@
   "System settings for Zulip": "System settings for Zulip",
   "Notifications are disabled.": "Notifications are disabled.",
   "Multiple issues. Tap to learn more.": "Multiple issues. Tap to learn more.",
+  "Notification settings for this account ({email} in {realmName}):": "Notification settings for this account ({email} in {realmName}):",
+  "Other accounts": "Other accounts",
   "Notifications when online": "Notifications when online",
   "Notifications when offline": "Notifications when offline",
   "Stream notifications": "Stream notifications",