[Chat] Restore back button to settings screens (#10602)

src/components/Layout/Header/index.tsx

@@ -48,7 +48,7 @@ export function Outer({
   const {gtMobile} = useBreakpoints()
   const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
   const {centerColumnOffset} = useLayoutBreakpoints()
-  const {isWithinSplitView} = useIsWithinSplitView()
+  const {isWithinSplitView, isWithinLeftPanel} = useIsWithinSplitView()
 
   return (
     <View
@@ -60,7 +60,7 @@ export function Outer({
         a.align_center,
         a.gap_sm,
         sticky && web([a.sticky, {top: 0}, a.z_10, t.atoms.bg]),
-        gutters,
+        isWithinLeftPanel ? a.px_lg : gutters,
         platform({
           native: [a.pb_xs, {minHeight: 48}],
           web: [a.py_xs, {minHeight: 52}],
@@ -112,7 +112,6 @@ export function Slot({children}: {children?: React.ReactNode}) {
 export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
-  const {isWithinRightPanel} = useIsWithinSplitView()
 
   const onPressBack = useCallback(
     (evt: GestureResponderEvent) => {
@@ -127,10 +126,6 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
     [onPress, navigation],
   )
 
-  if (isWithinRightPanel) {
-    return null
-  }
-
   return (
     <Slot>
       <Button
@@ -188,12 +183,14 @@ export function TitleText({
   style,
 }: {children: React.ReactNode} & TextStyleProp) {
   const {gtMobile} = useBreakpoints()
+  const {isWithinLeftPanel} = useIsWithinSplitView()
   const align = useContext(AlignmentContext)
   return (
     <Text
       style={[
-        a.text_lg,
-        a.font_semi_bold,
+        isWithinLeftPanel
+          ? [a.text_xl, a.font_bold]
+          : [a.text_lg, a.font_semi_bold],
         a.leading_tight,
         IS_IOS && align === 'platform' && a.text_center,
         gtMobile && a.text_xl,

src/components/dms/MessagesListHeader.tsx

@@ -13,6 +13,7 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
 import {atoms as a, useTheme} from '#/alf'
 import {AvatarBubbles} from '#/components/AvatarBubbles'
 import {ButtonIcon} from '#/components/Button'
@@ -31,13 +32,16 @@ const PFP_SIZE = IS_WEB ? 40 : Layout.HEADER_SLOT_SIZE
 export function MessagesListHeader({convo}: {convo?: ConvoWithDetails | null}) {
   const t = useTheme()
   const moderationOpts = useModerationOpts()
+  const {isWithinSplitView} = useIsWithinSplitView()
 
   return (
     <Layout.Header.Outer noBottomBorder={IS_LIQUID_GLASS}>
       <View style={[a.w_full, a.flex_row, a.gap_xs, a.align_start]}>
-        <View style={[{minHeight: PFP_SIZE}, a.justify_center]}>
-          <Layout.Header.BackButton />
-        </View>
+        {!isWithinSplitView && (
+          <View style={[{minHeight: PFP_SIZE}, a.justify_center]}>
+            <Layout.Header.BackButton />
+          </View>
+        )}
         {convo && moderationOpts ? (
           convo.kind === 'direct' ? (
             <ProfileHeaderReady convo={convo} moderationOpts={moderationOpts} />

src/screens/Messages/ConversationSettings/index.tsx

@@ -27,7 +27,7 @@ import {useLockConvo} from '#/state/queries/messages/lock-conversation'
 import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
 import {useSession} from '#/state/session'
 import {List} from '#/view/com/util/List'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {AvatarBubbles} from '#/components/AvatarBubbles'
 import {Button, type ButtonColor, ButtonIcon} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,15 +78,13 @@ type Props = NativeStackScreenProps<
 >
 
 export function MessagesConversationSettingsScreen({route}: Props) {
-  const {gtTablet} = useBreakpoints()
-
   const convoId = route.params.conversation
 
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
-        <Layout.Header.Content align={gtTablet ? 'left' : 'platform'}>
+        <Layout.Header.Content>
           <Layout.Header.TitleText>
             <Trans>Group chat settings</Trans>
           </Layout.Header.TitleText>