[Layout] ChatList header (#6929)

* Replace ChatList header

* update chat settings as well

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/screens/Messages/ChatList.tsx

@@ -16,7 +16,6 @@ import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
 import {useMessagesEventBus} from '#/state/messages/events'
 import {useListConvosQuery} from '#/state/queries/messages/list-converations'
 import {List} from '#/view/com/util/List'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -81,21 +80,6 @@ export function MessagesScreen({navigation, route}: Props) {
     }, [messagesBus, isActive]),
   )
 
-  const renderButton = useCallback(() => {
-    return (
-      <Link
-        to="/messages/settings"
-        label={_(msg`Chat settings`)}
-        size="small"
-        variant="ghost"
-        color="secondary"
-        shape="square"
-        style={[a.justify_center]}>
-        <SettingsSlider size="md" style={[t.atoms.text_contrast_medium]} />
-      </Link>
-    )
-  }, [_, t])
-
   const initialNumToRender = useInitialNumToRender({minItemHeight: 80})
   const [isPTRing, setIsPTRing] = useState(false)
 
@@ -144,27 +128,11 @@ export function MessagesScreen({navigation, route}: Props) {
     [navigation],
   )
 
-  const onNavigateToSettings = useCallback(() => {
-    navigation.navigate('MessagesSettings')
-  }, [navigation])
-
   if (conversations.length < 1) {
     return (
       <Layout.Screen>
         <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
-          {gtMobile ? (
+          <Header newChatControl={newChatControl} />
-            <DesktopHeader
-              newChatControl={newChatControl}
-              onNavigateToSettings={onNavigateToSettings}
-            />
-          ) : (
-            <ViewHeader
-              title={_(msg`Messages`)}
-              renderButton={renderButton}
-              showBorder
-              canGoBack={false}
-            />
-          )}
 
           {isLoading ? (
             <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
@@ -237,106 +205,93 @@ export function MessagesScreen({navigation, route}: Props) {
   }
 
   return (
-    <Layout.Screen testID="messagesScreen">
+    <Layout.Screen testID="messagesScreen" temp__enableWebBorders>
-      {!gtMobile && (
+      <Layout.Center>
-        <ViewHeader
+        <Header newChatControl={newChatControl} />
-          title={_(msg`Messages`)}
+        <NewChat onNewChat={onNewChat} control={newChatControl} />
-          renderButton={renderButton}
+        <List
-          showBorder
+          data={conversations}
-          canGoBack={false}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          refreshing={isPTRing}
+          onRefresh={onRefresh}
+          onEndReached={onEndReached}
+          ListFooterComponent={
+            <ListFooter
+              isFetchingNextPage={isFetchingNextPage}
+              error={cleanError(error)}
+              onRetry={fetchNextPage}
+              style={{borderColor: 'transparent'}}
+              hasNextPage={hasNextPage}
+              showEndMessage={true}
+              endMessageText={_(msg`No more conversations to show`)}
+            />
+          }
+          onEndReachedThreshold={isNative ? 1.5 : 0}
+          initialNumToRender={initialNumToRender}
+          windowSize={11}
+          // @ts-ignore our .web version only -sfn
+          desktopFixedHeight
+          sideBorders={false}
         />
-      )}
+      </Layout.Center>
-      <NewChat onNewChat={onNewChat} control={newChatControl} />
-      <List
-        data={conversations}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        refreshing={isPTRing}
-        onRefresh={onRefresh}
-        onEndReached={onEndReached}
-        ListHeaderComponent={
-          <DesktopHeader
-            newChatControl={newChatControl}
-            onNavigateToSettings={onNavigateToSettings}
-          />
-        }
-        ListFooterComponent={
-          <ListFooter
-            isFetchingNextPage={isFetchingNextPage}
-            error={cleanError(error)}
-            onRetry={fetchNextPage}
-            style={{borderColor: 'transparent'}}
-            hasNextPage={hasNextPage}
-            showEndMessage={true}
-            endMessageText={_(msg`No more conversations to show`)}
-          />
-        }
-        onEndReachedThreshold={isNative ? 1.5 : 0}
-        initialNumToRender={initialNumToRender}
-        windowSize={11}
-        // @ts-ignore our .web version only -sfn
-        desktopFixedHeight
-      />
     </Layout.Screen>
   )
 }
 
-function DesktopHeader({
+function Header({newChatControl}: {newChatControl: DialogControlProps}) {
-  newChatControl,
-  onNavigateToSettings,
-}: {
-  newChatControl: DialogControlProps
-  onNavigateToSettings: () => void
-}) {
-  const t = useTheme()
   const {_} = useLingui()
-  const {gtMobile, gtTablet} = useBreakpoints()
+  const {gtMobile} = useBreakpoints()
 
-  if (!gtMobile) {
+  const settingsLink = (
-    return null
+    <Link
-  }
+      to="/messages/settings"
+      label={_(msg`Chat settings`)}
+      size="small"
+      variant="ghost"
+      color="secondary"
+      shape="square"
+      style={[a.justify_center]}>
+      <ButtonIcon icon={SettingsSlider} size="md" />
+    </Link>
+  )
 
   return (
-    <View
+    <Layout.Header.Outer>
-      style={[
+      {gtMobile ? (
-        t.atoms.bg,
+        <>
-        a.flex_row,
+          <Layout.Header.Content>
-        a.align_center,
+            <Layout.Header.TitleText>
-        a.justify_between,
+              <Trans>Messages</Trans>
-        a.gap_lg,
+            </Layout.Header.TitleText>
-        a.px_lg,
+          </Layout.Header.Content>
-        a.pr_md,
+
-        a.py_sm,
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-        a.border_b,
+            {settingsLink}
-        t.atoms.border_contrast_low,
+            <Button
-      ]}>
+              label={_(msg`New chat`)}
-      <Text style={[a.text_2xl, a.font_bold]}>
+              color="primary"
-        <Trans>Messages</Trans>
+              size="small"
-      </Text>
+              variant="solid"
-      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+              onPress={newChatControl.open}>
-        <Button
+              <ButtonIcon icon={Plus} position="left" />
-          label={_(msg`Message settings`)}
+              <ButtonText>
-          color="secondary"
+                <Trans>New chat</Trans>
-          size="small"
+              </ButtonText>
-          variant="ghost"
+            </Button>
-          shape="square"
+          </View>
-          onPress={onNavigateToSettings}>
+        </>
-          <SettingsSlider size="md" style={[t.atoms.text_contrast_medium]} />
+      ) : (
-        </Button>
+        <>
-        {gtTablet && (
+          <Layout.Header.MenuButton />
-          <Button
+          <Layout.Header.Content>
-            label={_(msg`New chat`)}
+            <Layout.Header.TitleText>
-            color="primary"
+              <Trans>Messages</Trans>
-            size="small"
+            </Layout.Header.TitleText>
-            variant="solid"
+          </Layout.Header.Content>
-            onPress={newChatControl.open}>
+          <Layout.Header.Slot>{settingsLink}</Layout.Header.Slot>
-            <ButtonIcon icon={Plus} position="left" />
+        </>
-            <ButtonText>
+      )}
-              <Trans>New chat</Trans>
+    </Layout.Header.Outer>
-            </ButtonText>
-          </Button>
-        )}
-      </View>
-    </View>
   )
 }

src/screens/Messages/Settings.tsx

@@ -10,8 +10,6 @@ import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declarat
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Divider} from '#/components/Divider'
@@ -57,8 +55,16 @@ export function MessagesSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen testID="messagesSettingsScreen">
-      <ScrollView stickyHeaderIndices={[0]}>
+      <Layout.Header.Outer>
-        <ViewHeader title={_(msg`Chat Settings`)} showOnDesktop showBorder />
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>
+            <Trans>Chat Settings</Trans>
+          </Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content>
         <View style={[a.p_lg, a.gap_md]}>
           <Text style={[a.text_lg, a.font_bold]}>
             <Trans>Allow new messages from</Trans>
@@ -142,7 +148,7 @@ export function MessagesSettingsScreen({}: Props) {
             </>
           )}
         </View>
-      </ScrollView>
+      </Layout.Content>
     </Layout.Screen>
   )
 }