add header to empty chat list view (#3791)

2 files changed, 22 insertions, 4 deletions

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
index ee479cca9..481532434 100644
--- a/src/components/Error.tsx
+++ b/src/components/Error.tsx
@@ -72,7 +72,7 @@ export function Error({
             a.text_center,
             t.atoms.text_contrast_high,
             {lineHeight: 1.4},
-            gtMobile && {width: 450},
+            gtMobile ? {width: 450} : [a.w_full, a.px_lg],
           ]}>
           {message}
         </Text>
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx
index 65a2ff1e7..8aa16efd3 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@@ -18,6 +18,7 @@ import {List} from '#/view/com/util/List'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
@@ -110,19 +111,36 @@ export function MessagesListScreen({navigation}: Props) {
 
   if (conversations.length < 1) {
     return (
-      <>
+      <View style={a.flex_1}>
+        {gtMobile ? (
+          <CenteredView sideBorders>
+            <DesktopHeader
+              newChatControl={newChatControl}
+              onNavigateToSettings={onNavigateToSettings}
+            />
+          </CenteredView>
+        ) : (
+          <ViewHeader
+            title={_(msg`Messages`)}
+            renderButton={renderButton}
+            showBorder
+            canGoBack={false}
+          />
+        )}
+        {!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />}
         <ListMaybePlaceholder
           isLoading={isLoading}
           isError={isError}
           emptyType="results"
+          emptyTitle={_(msg`No messages yet`)}
           emptyMessage={_(
             msg`You have no messages yet. Start a conversation with someone!`,
           )}
           errorMessage={cleanError(error)}
           onRetry={isError ? refetch : undefined}
+          hideBackButton
         />
-        {!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />}
-      </>
+      </View>
     )
   }