Remove top padding from shell, move down into individual screens (#5548)

src/screens/Messages/ChatList.tsx

@@ -28,6 +28,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
+import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
@@ -149,7 +150,7 @@ export function MessagesScreen({navigation, route}: Props) {
 
   if (conversations.length < 1) {
     return (
-      <View style={a.flex_1}>
+      <Layout.Screen>
         <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
           {gtMobile ? (
             <DesktopHeader
@@ -231,12 +232,12 @@ export function MessagesScreen({navigation, route}: Props) {
         {!isLoading && !isError && (
           <NewChat onNewChat={onNewChat} control={newChatControl} />
         )}
-      </View>
+      </Layout.Screen>
     )
   }
 
   return (
-    <View style={a.flex_1}>
+    <Layout.Screen testID="messagesScreen">
       {!gtMobile && (
         <ViewHeader
           title={_(msg`Messages`)}
@@ -276,7 +277,7 @@ export function MessagesScreen({navigation, route}: Props) {
         // @ts-ignore our .web version only -sfn
         desktopFixedHeight
       />
-    </View>
+    </Layout.Screen>
   )
 }
 

src/screens/Messages/Conversation.tsx

@@ -18,10 +18,11 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {CenteredView} from '#/view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter'
 import {MessagesListHeader} from '#/components/dms/MessagesListHeader'
 import {Error} from '#/components/Error'
+import * as Layout from '#/components/Layout'
 import {Loader} from '#/components/Loader'
 
 type Props = NativeStackScreenProps<
@@ -64,9 +65,11 @@ export function MessagesConversationScreen({route}: Props) {
   )
 
   return (
-    <ConvoProvider key={convoId} convoId={convoId}>
-      <Inner />
-    </ConvoProvider>
+    <Layout.Screen testID="convoScreen" style={web([{minHeight: 0}, a.flex_1])}>
+      <ConvoProvider key={convoId} convoId={convoId}>
+        <Inner />
+      </ConvoProvider>
+    </Layout.Screen>
   )
 }
 
@@ -100,7 +103,7 @@ function Inner() {
 
   if (convoState.status === ConvoStatus.Error) {
     return (
-      <CenteredView style={a.flex_1} sideBorders>
+      <CenteredView style={[a.flex_1]} sideBorders>
         <MessagesListHeader />
         <Error
           title={_(msg`Something went wrong`)}

src/screens/Messages/Settings.tsx

@@ -16,6 +16,7 @@ import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
+import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
 import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 
@@ -55,91 +56,93 @@ export function MessagesSettingsScreen({}: Props) {
   )
 
   return (
-    <ScrollView stickyHeaderIndices={[0]}>
-      <ViewHeader title={_(msg`Chat Settings`)} showOnDesktop showBorder />
-      <View style={[a.p_lg, a.gap_md]}>
-        <Text style={[a.text_lg, a.font_bold]}>
-          <Trans>Allow new messages from</Trans>
-        </Text>
-        <Toggle.Group
-          label={_(msg`Allow new messages from`)}
-          type="radio"
-          values={[
-            (profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
-              'following',
-          ]}
-          onChange={onSelectMessagesFrom}>
-          <View>
-            <Toggle.Item
-              name="all"
-              label={_(msg`Everyone`)}
-              style={[a.justify_between, a.py_sm]}>
-              <Toggle.LabelText>
-                <Trans>Everyone</Trans>
-              </Toggle.LabelText>
-              <Toggle.Radio />
-            </Toggle.Item>
-            <Toggle.Item
-              name="following"
-              label={_(msg`Users I follow`)}
-              style={[a.justify_between, a.py_sm]}>
-              <Toggle.LabelText>
-                <Trans>Users I follow</Trans>
-              </Toggle.LabelText>
-              <Toggle.Radio />
-            </Toggle.Item>
-            <Toggle.Item
-              name="none"
-              label={_(msg`No one`)}
-              style={[a.justify_between, a.py_sm]}>
-              <Toggle.LabelText>
-                <Trans>No one</Trans>
-              </Toggle.LabelText>
-              <Toggle.Radio />
-            </Toggle.Item>
-          </View>
-        </Toggle.Group>
-        <Admonition type="tip">
-          <Trans>
-            You can continue ongoing conversations regardless of which setting
-            you choose.
-          </Trans>
-        </Admonition>
-        {isNative && (
-          <>
-            <Divider style={a.my_md} />
-            <Text style={[a.text_lg, a.font_bold]}>
-              <Trans>Notification Sounds</Trans>
-            </Text>
-            <Toggle.Group
-              label={_(msg`Notification sounds`)}
-              type="radio"
-              values={[preferences.playSoundChat ? 'enabled' : 'disabled']}
-              onChange={onSelectSoundSetting}>
-              <View>
-                <Toggle.Item
-                  name="enabled"
-                  label={_(msg`Enabled`)}
-                  style={[a.justify_between, a.py_sm]}>
-                  <Toggle.LabelText>
-                    <Trans>Enabled</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="disabled"
-                  label={_(msg`Disabled`)}
-                  style={[a.justify_between, a.py_sm]}>
-                  <Toggle.LabelText>
-                    <Trans>Disabled</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-              </View>
-            </Toggle.Group>
-          </>
-        )}
-      </View>
-    </ScrollView>
+    <Layout.Screen testID="messagesSettingsScreen">
+      <ScrollView stickyHeaderIndices={[0]}>
+        <ViewHeader title={_(msg`Chat Settings`)} showOnDesktop showBorder />
+        <View style={[a.p_lg, a.gap_md]}>
+          <Text style={[a.text_lg, a.font_bold]}>
+            <Trans>Allow new messages from</Trans>
+          </Text>
+          <Toggle.Group
+            label={_(msg`Allow new messages from`)}
+            type="radio"
+            values={[
+              (profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
+                'following',
+            ]}
+            onChange={onSelectMessagesFrom}>
+            <View>
+              <Toggle.Item
+                name="all"
+                label={_(msg`Everyone`)}
+                style={[a.justify_between, a.py_sm]}>
+                <Toggle.LabelText>
+                  <Trans>Everyone</Trans>
+                </Toggle.LabelText>
+                <Toggle.Radio />
+              </Toggle.Item>
+              <Toggle.Item
+                name="following"
+                label={_(msg`Users I follow`)}
+                style={[a.justify_between, a.py_sm]}>
+                <Toggle.LabelText>
+                  <Trans>Users I follow</Trans>
+                </Toggle.LabelText>
+                <Toggle.Radio />
+              </Toggle.Item>
+              <Toggle.Item
+                name="none"
+                label={_(msg`No one`)}
+                style={[a.justify_between, a.py_sm]}>
+                <Toggle.LabelText>
+                  <Trans>No one</Trans>
+                </Toggle.LabelText>
+                <Toggle.Radio />
+              </Toggle.Item>
+            </View>
+          </Toggle.Group>
+          <Admonition type="tip">
+            <Trans>
+              You can continue ongoing conversations regardless of which setting
+              you choose.
+            </Trans>
+          </Admonition>
+          {isNative && (
+            <>
+              <Divider style={a.my_md} />
+              <Text style={[a.text_lg, a.font_bold]}>
+                <Trans>Notification Sounds</Trans>
+              </Text>
+              <Toggle.Group
+                label={_(msg`Notification sounds`)}
+                type="radio"
+                values={[preferences.playSoundChat ? 'enabled' : 'disabled']}
+                onChange={onSelectSoundSetting}>
+                <View>
+                  <Toggle.Item
+                    name="enabled"
+                    label={_(msg`Enabled`)}
+                    style={[a.justify_between, a.py_sm]}>
+                    <Toggle.LabelText>
+                      <Trans>Enabled</Trans>
+                    </Toggle.LabelText>
+                    <Toggle.Radio />
+                  </Toggle.Item>
+                  <Toggle.Item
+                    name="disabled"
+                    label={_(msg`Disabled`)}
+                    style={[a.justify_between, a.py_sm]}>
+                    <Toggle.LabelText>
+                      <Trans>Disabled</Trans>
+                    </Toggle.LabelText>
+                    <Toggle.Radio />
+                  </Toggle.Item>
+                </View>
+              </Toggle.Group>
+            </>
+          )}
+        </View>
+      </ScrollView>
+    </Layout.Screen>
   )
 }