offline notice: Move to always be at top of screen, just below top inset

We want to try making the OfflineNotice a surface that fills the top
inset, instead of being a bar that cuts through the middle of an
existing surface.

Toward that goal, make it so OfflineNotice abuts the top inset, to
simplify the diff when it starts actually covering the top inset.

In some cases, the OfflineNotice is already where we want it to be.

In all cases, take care to make sure the OfflineNotice isn't cut off
before it reaches the the extreme left and right of the screen. In
ModalNavBar and ModalSearchNavBar, we do so by moving two sets of
horizontal padding inward to the view that's styled
`styles.contentArea`, and putting the OfflineNotice outside that
view: automatic inset padding from a SafeAreaView, and our own added
padding of 4px. Having done that, remove an old comment whose
explanation would now be wrong about why we have the inner view.

Author: chrisbobbe

src/nav/ChatNavBar.js

@@ -164,6 +164,7 @@ export default function ChatNavBar(props: {|
           backgroundColor: streamColor,
         }}
       >
+        <OfflineNotice />
         {/* This SafeAreaView is the app bar:
             https://material.io/components/app-bars-top#specs */}
         <SafeAreaView
@@ -194,7 +195,6 @@ export default function ChatNavBar(props: {|
           textColor={textColor}
         />
       </SafeAreaView>
-      <OfflineNotice />
     </>
   );
 }

src/nav/ModalNavBar.js

@@ -1,7 +1,6 @@
 /* @flow strict-local */
 import React, { useContext, useMemo } from 'react';
 import type { Node } from 'react';
-import { View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { LocalizableReactText } from '../types';
@@ -42,37 +41,28 @@ export default function ModalNavBar(props: Props): Node {
         { flex: 1 },
         canGoBack ? { marginStart: 20, marginEnd: 8 } : { marginHorizontal: 8 },
       ],
-      safeAreaView: {
+      surface: {
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         borderBottomWidth: 1,
         backgroundColor,
-        paddingHorizontal: 4,
       },
       contentArea: {
-        // We should really be able to put this in styles.safeAreaView, and
-        // it should control the height of the "content area" of that view,
-        // excluding padding. But SafeAreaView seems to take `height` and
-        // `minHeight` as controlling the height of everything including the
-        // automatic vertical padding. So, we've added this separate View.
         minHeight: NAVBAR_SIZE,
-
         flexDirection: 'row',
         alignItems: 'center',
+        paddingHorizontal: 4,
       },
     }),
     [canGoBack, backgroundColor],
   );
 
   return (
-    <>
-      <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
-        {/* See comment on styles.contentArea.minHeight. */}
-        <View style={styles.contentArea}>
-          {canGoBack && <NavBarBackButton />}
-          <ZulipTextIntl style={styles.text} text={title} numberOfLines={1} ellipsizeMode="tail" />
-        </View>
-      </SafeAreaView>
+    <SafeAreaView mode="padding" edges={['top']} style={styles.surface}>
       <OfflineNotice />
-    </>
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.contentArea}>
+        {canGoBack && <NavBarBackButton />}
+        <ZulipTextIntl style={styles.text} text={title} numberOfLines={1} ellipsizeMode="tail" />
+      </SafeAreaView>
+    </SafeAreaView>
   );
 }

src/nav/ModalSearchNavBar.js

@@ -29,47 +29,38 @@ export default function ModalSearchNavBar(props: Props): Node {
 
   const styles = useMemo(
     () => ({
-      safeAreaView: {
+      surface: {
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         borderBottomWidth: 1,
         backgroundColor,
-        paddingHorizontal: 4,
       },
       contentArea: {
-        // We should really be able to put this in styles.safeAreaView, and
-        // it should control the height of the "content area" of that view,
-        // excluding padding. But SafeAreaView seems to take `height` and
-        // `minHeight` as controlling the height of everything including the
-        // automatic vertical padding. So, we've added this separate View.
         minHeight: NAVBAR_SIZE,
-
         flexDirection: 'row',
         alignItems: 'center',
+        paddingHorizontal: 4,
       },
     }),
     [backgroundColor],
   );
 
   return (
-    <>
-      <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
-        {/* See comment on styles.contentArea.minHeight. */}
-        <View style={styles.contentArea}>
-          {canGoBack && (
-            <>
-              <NavBarBackButton />
-              <View style={{ width: 20 }} />
-            </>
-          )}
-          <SearchInput
-            autoFocus={autoFocus}
-            onChangeText={searchBarOnChange}
-            onSubmitEditing={searchBarOnSubmit}
-            placeholder={placeholder}
-          />
-        </View>
-      </SafeAreaView>
+    <SafeAreaView mode="padding" edges={['top']} style={styles.surface}>
       <OfflineNotice />
-    </>
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.contentArea}>
+        {canGoBack && (
+          <>
+            <NavBarBackButton />
+            <View style={{ width: 20 }} />
+          </>
+        )}
+        <SearchInput
+          autoFocus={autoFocus}
+          onChangeText={searchBarOnChange}
+          onSubmitEditing={searchBarOnSubmit}
+          placeholder={placeholder}
+        />
+      </SafeAreaView>
+    </SafeAreaView>
   );
 }