add split view layout to chat

src/components/Layout/Header/index.tsx

@@ -7,6 +7,7 @@ import {useNavigation} from '@react-navigation/native'
 import {HITSLOP_30} from '#/lib/constants'
 import {type NavigationProp} from '#/lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
+import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
 import {
   atoms as a,
   platform,
@@ -46,6 +47,7 @@ export function Outer({
   const {gtMobile} = useBreakpoints()
   const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
   const {centerColumnOffset} = useLayoutBreakpoints()
+  const {isWithinSplitView} = useIsWithinSplitView()
 
   return (
     <View
@@ -64,12 +66,13 @@ export function Outer({
         }),
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],
-        !isWithinOffsetView && {
-          transform: [
-            {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
-            {translateX: web(SCROLLBAR_OFFSET) ?? 0},
-          ],
-        },
+        !isWithinOffsetView &&
+          !isWithinSplitView && {
+            transform: [
+              {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
+              {translateX: web(SCROLLBAR_OFFSET) ?? 0},
+            ],
+          },
       ]}>
       {children}
     </View>
@@ -108,6 +111,7 @@ 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) => {
@@ -122,6 +126,10 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
     [onPress, navigation],
   )
 
+  if (isWithinRightPanel) {
+    return null
+  }
+
   return (
     <Slot>
       <Button

src/components/Layout/index.tsx

@@ -18,6 +18,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {useEnableMinimalShellModeForScreen} from '#/state/shell'
 import {useShellLayout} from '#/state/shell/shell-layout'
+import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
 import {
   atoms as a,
   useBreakpoints,
@@ -49,12 +50,13 @@ export const Screen = memo(function Screen({
   ...props
 }: ScreenProps) {
   const {top} = useSafeAreaInsets()
+  const {isWithinSplitView} = useIsWithinSplitView()
 
   useEnableMinimalShellModeForScreen({enabled: minimalShell})
 
   return (
     <>
-      {IS_WEB && <WebCenterBorders />}
+      {IS_WEB && !isWithinSplitView && <WebCenterBorders />}
       <View
         style={[a.util_screen_outer, {paddingTop: noInsetTop ? 0 : top}, style]}
         {...props}
@@ -174,28 +176,30 @@ export const Center = memo(function LayoutCenter({
   const {gtMobile} = useBreakpoints()
   const {centerColumnOffset} = useLayoutBreakpoints()
   const {isWithinDialog} = useDialogContext()
+  const {isWithinSplitView} = useIsWithinSplitView()
   const ctx = useMemo(() => ({isWithinOffsetView: true}), [])
   return (
     <View
       style={[
         a.w_full,
-        a.mx_auto,
+        !isWithinSplitView && a.mx_auto,
         gtMobile && {
           maxWidth: 600,
         },
-        !isWithinOffsetView && {
-          transform: [
-            {
-              translateX:
-                centerColumnOffset &&
-                !ignoreTabletLayoutOffset &&
-                !isWithinDialog
-                  ? CENTER_COLUMN_OFFSET
-                  : 0,
-            },
-            {translateX: web(SCROLLBAR_OFFSET) ?? 0},
-          ],
-        },
+        !isWithinOffsetView &&
+          !isWithinSplitView && {
+            transform: [
+              {
+                translateX:
+                  centerColumnOffset &&
+                  !ignoreTabletLayoutOffset &&
+                  !isWithinDialog
+                    ? CENTER_COLUMN_OFFSET
+                    : 0,
+              },
+              {translateX: web(SCROLLBAR_OFFSET) ?? 0},
+            ],
+          },
         style,
       ]}
       {...props}>

src/components/dms/dialogs/NewChatDialog.tsx

@@ -6,6 +6,7 @@ import {logger} from '#/logger'
 import {useCreateGroupChat} from '#/state/queries/messages/create-group-chat'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
 import {FAB} from '#/view/com/util/fab/FAB'
+import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from '#/components/dialogs/SearchablePeopleList'
@@ -25,6 +26,7 @@ export function NewChat({
   const {t: l} = useLingui()
   const ax = useAnalytics()
   const requireEmailVerification = useRequireEmailVerification()
+  const {isWithinSplitView} = useIsWithinSplitView()
 
   const isGroupChatEnabled = ax.features.enabled(ax.features.GroupChatsEnable)
 
@@ -99,14 +101,17 @@ export function NewChat({
 
   return (
     <>
-      <FAB
-        testID="newChatFAB"
-        onPress={wrappedOnPress}
-        icon={<NewChatIcon size="lg" fill={t.palette.white} />}
-        accessibilityRole="button"
-        accessibilityLabel={l`New chat`}
-        accessibilityHint=""
-      />
+      {/* in split view, header button is always available, so no need for FAB */}
+      {!isWithinSplitView && (
+        <FAB
+          testID="newChatFAB"
+          onPress={wrappedOnPress}
+          icon={<NewChatIcon size="lg" fill={t.palette.white} />}
+          accessibilityRole="button"
+          accessibilityLabel={l`New chat`}
+          accessibilityHint=""
+        />
+      )}
       <Dialog.Outer
         control={control}
         testID="newChatDialog"