about summary refs log tree commit diff
path: root/src/screens/Messages
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens/Messages')
-rw-r--r--src/screens/Messages/ChatList.tsx160
-rw-r--r--src/screens/Messages/Conversation.tsx9
-rw-r--r--src/screens/Messages/Settings.tsx16
3 files changed, 70 insertions, 115 deletions
diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx
index 4f2bd251f..1a87a2ac5 100644
--- a/src/screens/Messages/ChatList.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -16,8 +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'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
@@ -49,7 +47,6 @@ export function MessagesScreen({navigation, route}: Props) {
   const {_} = useLingui()
   const t = useTheme()
   const newChatControl = useDialogControl()
-  const {gtMobile} = useBreakpoints()
   const pushToConversation = route.params?.pushToConversation
 
   // Whenever we have `pushToConversation` set, it means we pressed a notification for a chat without being on
@@ -81,21 +78,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,28 +126,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 ? (
-            <DesktopHeader
-              newChatControl={newChatControl}
-              onNavigateToSettings={onNavigateToSettings}
-            />
-          ) : (
-            <ViewHeader
-              title={_(msg`Messages`)}
-              renderButton={renderButton}
-              showBorder
-              canGoBack={false}
-            />
-          )}
-
+        <Header newChatControl={newChatControl} />
+        <Layout.Center>
           {isLoading ? (
             <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
               <Loader size="xl" />
@@ -227,7 +192,7 @@ export function MessagesScreen({navigation, route}: Props) {
               )}
             </>
           )}
-        </CenteredView>
+        </Layout.Center>
 
         {!isLoading && !isError && (
           <NewChat onNewChat={onNewChat} control={newChatControl} />
@@ -238,14 +203,7 @@ export function MessagesScreen({navigation, route}: Props) {
 
   return (
     <Layout.Screen testID="messagesScreen">
-      {!gtMobile && (
-        <ViewHeader
-          title={_(msg`Messages`)}
-          renderButton={renderButton}
-          showBorder
-          canGoBack={false}
-        />
-      )}
+      <Header newChatControl={newChatControl} />
       <NewChat onNewChat={onNewChat} control={newChatControl} />
       <List
         data={conversations}
@@ -254,12 +212,6 @@ export function MessagesScreen({navigation, route}: Props) {
         refreshing={isPTRing}
         onRefresh={onRefresh}
         onEndReached={onEndReached}
-        ListHeaderComponent={
-          <DesktopHeader
-            newChatControl={newChatControl}
-            onNavigateToSettings={onNavigateToSettings}
-          />
-        }
         ListFooterComponent={
           <ListFooter
             isFetchingNextPage={isFetchingNextPage}
@@ -276,67 +228,65 @@ export function MessagesScreen({navigation, route}: Props) {
         windowSize={11}
         // @ts-ignore our .web version only -sfn
         desktopFixedHeight
+        sideBorders={false}
       />
     </Layout.Screen>
   )
 }
 
-function DesktopHeader({
-  newChatControl,
-  onNavigateToSettings,
-}: {
-  newChatControl: DialogControlProps
-  onNavigateToSettings: () => void
-}) {
-  const t = useTheme()
+function Header({newChatControl}: {newChatControl: DialogControlProps}) {
   const {_} = useLingui()
-  const {gtMobile, gtTablet} = useBreakpoints()
+  const {gtMobile} = useBreakpoints()
 
-  if (!gtMobile) {
-    return null
-  }
+  const settingsLink = (
+    <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
-      style={[
-        t.atoms.bg,
-        a.flex_row,
-        a.align_center,
-        a.justify_between,
-        a.gap_lg,
-        a.px_lg,
-        a.pr_md,
-        a.py_sm,
-        a.border_b,
-        t.atoms.border_contrast_low,
-      ]}>
-      <Text style={[a.text_2xl, a.font_bold]}>
-        <Trans>Messages</Trans>
-      </Text>
-      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-        <Button
-          label={_(msg`Message settings`)}
-          color="secondary"
-          size="small"
-          variant="ghost"
-          shape="square"
-          onPress={onNavigateToSettings}>
-          <SettingsSlider size="md" style={[t.atoms.text_contrast_medium]} />
-        </Button>
-        {gtTablet && (
-          <Button
-            label={_(msg`New chat`)}
-            color="primary"
-            size="small"
-            variant="solid"
-            onPress={newChatControl.open}>
-            <ButtonIcon icon={Plus} position="left" />
-            <ButtonText>
-              <Trans>New chat</Trans>
-            </ButtonText>
-          </Button>
-        )}
-      </View>
-    </View>
+    <Layout.Header.Outer>
+      {gtMobile ? (
+        <>
+          <Layout.Header.Content>
+            <Layout.Header.TitleText>
+              <Trans>Messages</Trans>
+            </Layout.Header.TitleText>
+          </Layout.Header.Content>
+
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+            {settingsLink}
+            <Button
+              label={_(msg`New chat`)}
+              color="primary"
+              size="small"
+              variant="solid"
+              onPress={newChatControl.open}>
+              <ButtonIcon icon={Plus} position="left" />
+              <ButtonText>
+                <Trans>New chat</Trans>
+              </ButtonText>
+            </Button>
+          </View>
+        </>
+      ) : (
+        <>
+          <Layout.Header.MenuButton />
+          <Layout.Header.Content>
+            <Layout.Header.TitleText>
+              <Trans>Messages</Trans>
+            </Layout.Header.TitleText>
+          </Layout.Header.Content>
+          <Layout.Header.Slot>{settingsLink}</Layout.Header.Slot>
+        </>
+      )}
+    </Layout.Header.Outer>
   )
 }
diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx
index a2157d2b9..b8b0bfe0d 100644
--- a/src/screens/Messages/Conversation.tsx
+++ b/src/screens/Messages/Conversation.tsx
@@ -17,7 +17,6 @@ import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 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, web} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
@@ -97,7 +96,7 @@ function Inner() {
 
   if (convoState.status === ConvoStatus.Error) {
     return (
-      <CenteredView style={[a.flex_1]} sideBorders>
+      <Layout.Center style={[a.flex_1]}>
         <MessagesListHeader />
         <Error
           title={_(msg`Something went wrong`)}
@@ -105,12 +104,12 @@ function Inner() {
           onRetry={() => convoState.error.retry()}
           sideBorders={false}
         />
-      </CenteredView>
+      </Layout.Center>
     )
   }
 
   return (
-    <CenteredView style={[a.flex_1]} sideBorders>
+    <Layout.Center style={[a.flex_1]}>
       {!readyToShow && <MessagesListHeader />}
       <View style={[a.flex_1]}>
         {moderationOpts && recipient ? (
@@ -140,7 +139,7 @@ function Inner() {
           </View>
         )}
       </View>
-    </CenteredView>
+    </Layout.Center>
   )
 }
 
diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx
index 50b1c4cc9..f37e7a9ba 100644
--- a/src/screens/Messages/Settings.tsx
+++ b/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]}>
-        <ViewHeader title={_(msg`Chat Settings`)} showOnDesktop showBorder />
+      <Layout.Header.Outer>
+        <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>
   )
 }
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 12:38:00 +0000