@planningcenter/chat-react-native 3.42.3-qa-staging.6 → 3.42.3-qa-856.0

package/src/components/conversation/messages_disabled_banners.tsx

@@ -1,6 +1,8 @@
 import { StyleSheet, View, type ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
+import type { ConversationDisabledReason } from '../../types'
+import { ADULT_REQUIREMENT_BODY } from '../../utils'
 import { Button, Text } from '../display'
 
 export const LeaderMessagesDisabledBanner = () => {
@@ -20,19 +22,25 @@ export const MemberMessagesDisabledBanner = () => {
   )
 }
 
+const DISABLED_REASON_TEXT: Record<ConversationDisabledReason, string> = {
+  safety_check: ADULT_REQUIREMENT_BODY,
+  direct_messages_disabled: 'Direct messages have been turned off by someone in this conversation.',
+}
+
 const DEFAULT_DISABLED_TEXT = 'This conversation has been disabled.'
 
 interface ConversationDisabledBannerProps {
-  message: string | null
+  disabledReason?: ConversationDisabledReason
   messageLink?: { label: string; onPress: () => void }
 }
 
 export const ConversationDisabledBanner = ({
-  message,
+  disabledReason,
   messageLink,
 }: ConversationDisabledBannerProps) => {
   const styles = useStyles()
-  const description = message ?? DEFAULT_DISABLED_TEXT
+  const description =
+    (disabledReason && DISABLED_REASON_TEXT[disabledReason]) ?? DEFAULT_DISABLED_TEXT
 
   return (
     <MessagesDisabledBanner

package/src/components/display/adult_requirement_notice.tsx

@@ -13,7 +13,7 @@ export function AdultRequirementNotice({ style }: AdultRequirementNoticeProps) {
     <BannerCollapsible
       appearance="warning"
       iconName="general.shieldExclamation"
-      heading="Two adults required to chat"
+      heading="2 adults required to chat"
       style={style}
     >
       <BannerPrimitive.Text>{ADULT_REQUIREMENT_BODY}</BannerPrimitive.Text>

package/src/components/display/platform_modal_header_buttons.tsx

@@ -1,19 +1,16 @@
-import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements'
+import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
 import { useNavigation } from '@react-navigation/native'
 import type {
-  NativeStackHeaderItemProps,
+  NativeStackHeaderLeftProps,
+  NativeStackHeaderRightProps,
   NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
 import { useLayoutEffect } from 'react'
 import { ColorValue, Platform, StyleSheet } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import { useFontScale, useTheme } from '../../hooks'
-import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { useTheme } from '../../hooks'
 import { isLiquidGlassEnabled } from '../../utils/liquid_glass'
-import { tokens } from '../../vendor/tapestry/tokens'
-import { Icon, type IconString } from './icon'
+import { Icon } from './icon'
 import { TextButton } from './text_button'
-import { getColorKey, useGradientColorMap } from './utils/button_colors'
 
 interface HeaderTextButtonProps {
   onPress: () => void
@@ -75,10 +72,14 @@ export const HeaderDismissButton = ({
 
 const createTextHeaderRight =
   ({ onPress, title, disabled }: HeaderTextButtonProps) =>
-  (props: NativeStackHeaderItemProps) => (
+  (props: NativeStackHeaderRightProps) => (
     <HeaderTextButton {...props} onPress={onPress} title={title} disabled={disabled} />
   )
 
+const createDismissHeaderLeft =
+  ({ onPress, title }: { onPress: () => void; title: string }) =>
+  () => <HeaderDismissButton title={title} onPress={onPress} />
+
 export type OptionsDecorator = (
   options: NativeStackNavigationOptions
 ) => NativeStackNavigationOptions
@@ -105,149 +106,42 @@ export const withRightText =
     unstable_headerRightItems: () => [{ type: 'button' as const, label: text, onPress, disabled }],
   })
 
-const HEADER_ICON_SIZE = 17
-const HEADER_FILL_ICON_SIZE = 16
-const HEADER_FILL_PADDING = 14
-const HEADER_BAR_INSET = 16
-const HEADER_SLOT_GAP = 12
-
-const headerFillSize = (fontScale: number) => {
-  const icon = HEADER_FILL_ICON_SIZE * fontScale
-
-  return { icon, circle: icon + HEADER_FILL_PADDING * 2 }
-}
-
-// Liquid glass icons don't communicate
-export const useHeaderSlotReserve = (): number => {
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
-
-  return HEADER_BAR_INSET + headerFillSize(fontScale).circle + HEADER_SLOT_GAP
-}
-
-const HEADER_FALLBACK_HIT_SLOP = 14
-
-const iconStyles = StyleSheet.create({
-  disabled: {
-    opacity: 0.4,
-  },
-  fallbackButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 8,
-  },
-  fillCircle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})
-
-export interface HeaderIconProps {
-  icon: IconString
-  accessibilityLabel: string
-  onPress: () => void
-  disabled?: boolean
-  variant?: 'plain' | 'fill'
-}
-
-const HeaderIcon = ({
-  icon,
-  disabled,
-  variant,
-}: Pick<HeaderIconProps, 'icon' | 'disabled' | 'variant'>) => {
-  const { colors } = useTheme()
-  const gradients = useGradientColorMap()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
-
-  if (variant !== 'fill') return <Icon name={icon} size={HEADER_ICON_SIZE} />
-
-  const { icon: iconSize, circle: circleSize } = headerFillSize(fontScale)
-
-  return (
-    <LinearGradient
-      start={{ x: 0.1, y: 0.1 }}
-      end={{ x: 0.9, y: 0.9 }}
-      colors={gradients[getColorKey({ disabled: Boolean(disabled), appearance: 'interaction' })]}
-      style={[
-        iconStyles.fillCircle,
-        { borderRadius: circleSize, height: circleSize, width: circleSize },
-      ]}
-    >
-      <Icon
-        name={icon}
-        size={iconSize}
-        color={disabled ? colors.iconColorDefaultDisabled : tokens.colorNeutral100White}
-      />
-    </LinearGradient>
-  )
-}
-
-// Native bar items take SF Symbols, images, or any element, so both paths
-// render the same icon: iOS 26 puts this one in the glass circle, and the
-// element below covers Android and older iOS.
-const createHeaderIconItem = ({
-  icon,
-  accessibilityLabel,
-  onPress,
-  disabled,
-  variant,
-}: HeaderIconProps) => ({
-  type: 'custom' as const,
-  // The gradient circle replaces the glass one rather than sitting on it.
-  hidesSharedBackground: variant === 'fill',
-  element: (
-    <PlatformPressable
-      onPress={onPress}
-      disabled={disabled}
-      hitSlop={12}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      style={disabled && variant !== 'fill' && iconStyles.disabled}
-    >
-      <HeaderIcon icon={icon} disabled={disabled} variant={variant} />
-    </PlatformPressable>
-  ),
-})
-
-const createHeaderIconElement =
-  ({ icon, accessibilityLabel, onPress, disabled, variant }: HeaderIconProps) =>
-  () => (
-    <PlatformPressable
-      onPress={onPress}
-      disabled={disabled}
-      hitSlop={HEADER_FALLBACK_HIT_SLOP}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      style={[iconStyles.fallbackButton, disabled && variant !== 'fill' && iconStyles.disabled]}
-    >
-      <HeaderIcon icon={icon} disabled={disabled} variant={variant} />
-    </PlatformPressable>
-  )
-
-export const withRightIcon =
-  (props: HeaderIconProps): OptionsDecorator =>
+export const withLeftText =
+  ({ text, onPress }: TextButtonDecoratorProps): OptionsDecorator =>
   options => ({
     ...options,
-    headerRight: createHeaderIconElement(props),
-    unstable_headerRightItems: () => [createHeaderIconItem(props)],
+    headerLeft: createDismissHeaderLeft({ title: text, onPress }),
+    unstable_headerLeftItems: () => [{ type: 'button' as const, label: text, onPress }],
   })
 
-export const withLeftIcon =
-  (props: HeaderIconProps): OptionsDecorator =>
+const renderCloseImage = ({ tintColor }: { tintColor: string }) => (
+  <Icon name="general.x" size={18} color={tintColor} />
+)
+
+const createCloseHeaderRight =
+  ({ onPress }: { onPress: () => void }) =>
+  (props: NativeStackHeaderRightProps) => (
+    <HeaderBackButton backImage={renderCloseImage} onPress={onPress} {...props} />
+  )
+
+// The native slot takes only SF Symbols or bundled rasters — we have no way
+// to systematize rasterizing our SVG icon library, and xmark matches
+// general.x closely. The fallback keeps our icon.
+export const withRightClose =
+  ({ onPress }: { onPress: () => void }): OptionsDecorator =>
   options => ({
     ...options,
-    headerLeft: createHeaderIconElement(props),
-    unstable_headerLeftItems: () => [createHeaderIconItem(props)],
+    headerRight: createCloseHeaderRight({ onPress }),
+    unstable_headerRightItems: () => [
+      {
+        type: 'button' as const,
+        label: 'Close',
+        icon: { type: 'sfSymbol' as const, name: 'xmark' as const },
+        onPress,
+      },
+    ],
   })
 
-export const withRightClose = ({ onPress }: { onPress: () => void }) =>
-  withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
-
-export const withLeftClose = ({ onPress }: { onPress: () => void }) =>
-  withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
-
-export const withRightDone = ({ onPress }: { onPress: () => void }) =>
-  withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress })
-
 // The default back icon reserves trailing space for a label that
 // displayMode="minimal" never shows; a custom image skips it so the glass
 // capsule hugs the glyph.
@@ -259,7 +153,7 @@ const renderGlassBackImage = ({ tintColor }: { tintColor: string }) => (
 // the button against the capsule edge.
 export const createMinimalHeaderBackButton =
   ({ onPress }: { onPress: () => void }) =>
-  (props: NativeStackHeaderItemProps) => (
+  (props: NativeStackHeaderLeftProps) => (
     <HeaderBackButton
       style={
         isLiquidGlassEnabled()
@@ -285,25 +179,22 @@ export const withMinimalBack =
     ...(isLiquidGlassEnabled() ? {} : { headerLeft: createMinimalHeaderBackButton({ onPress }) }),
   })
 
-// An icon or a title, never both — passing both is a compile error rather
-// than a question of which one wins.
-type UseHeaderRightOptions = {
+interface UseHeaderRightOptions {
+  title: string
   onPress: () => void
   disabled?: boolean
   enabled?: boolean
-} & (
-  | (HeaderIconProps & { title?: never })
-  | { title: string; icon?: never; accessibilityLabel?: never; variant?: never }
-)
+}
 
 // For screens whose header button depends on live state (form validity,
 // mutation callbacks). Static buttons belong in the navigator options.
-export const useHeaderRight = (options: UseHeaderRightOptions) => {
+export const useHeaderRight = ({
+  title,
+  onPress,
+  disabled,
+  enabled = true,
+}: UseHeaderRightOptions) => {
   const navigation = useNavigation()
-  const { onPress, disabled, enabled = true } = options
-  const icon = options.icon
-  const label = options.icon !== undefined ? options.accessibilityLabel : options.title
-  const variant = options.variant
 
   useLayoutEffect(() => {
     if (!enabled) {
@@ -311,12 +202,8 @@ export const useHeaderRight = (options: UseHeaderRightOptions) => {
       return
     }
 
-    const decorate = icon
-      ? withRightIcon({ icon, accessibilityLabel: label, onPress, disabled, variant })
-      : withRightText({ text: label, onPress, disabled })
-
-    navigation.setOptions(decorate({}))
-  }, [disabled, enabled, icon, label, navigation, onPress, variant])
+    navigation.setOptions(withRightText({ text: title, onPress, disabled })({}))
+  }, [disabled, enabled, navigation, onPress, title])
 }
 
 const useStyles = () => {

package/src/hooks/index.ts

@@ -8,7 +8,7 @@ export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
 export * from './use_current_person'
 export * from './use_deleting_ids'
-export * from './use_direct_messages_eligible'
+export * from './use_direct_messages_enabled'
 export * from './use_font_scale'
 export * from './use_has_direct_messages'
 export * from './use_groups_groups'

package/src/hooks/use_conversation.ts

@@ -32,7 +32,6 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'direct_message',
         'disabled',
         'disabled_reason',
-        'disabled_message',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_conversation_jolt_events.ts

@@ -26,13 +26,8 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleUpdatedConversation = useCallback(
     (e: JoltConversationEvent) => {
-      const {
-        last_message_idempotent_key,
-        last_message_author_id,
-        disabled,
-        disabled_reason,
-        disabled_message,
-      } = e.data.data
+      const { last_message_idempotent_key, last_message_author_id, disabled, disabled_reason } =
+        e.data.data
 
       if (last_message_idempotent_key && last_message_author_id === currentPersonId) {
         completeMessageCreationConversationTracking({
@@ -43,15 +38,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-        return {
-          ...prev,
-          data: {
-            ...prev.data,
-            disabled,
-            disabledReason: disabled_reason,
-            disabledMessage: disabled_message,
-          },
-        }
+        return { ...prev, data: { ...prev.data, disabled, disabledReason: disabled_reason } }
       })
 
       queryClient.invalidateQueries({ queryKey })

package/src/hooks/use_current_person.ts

@@ -17,7 +17,6 @@ export const currentPersonRequestArgs = {
         'pco_chat_enabled',
         'age_qualification_status',
         'direct_messages_disabled',
-        'direct_messages_eligible',
         'under_18',
       ],
     },

package/src/hooks/use_direct_messages_enabled.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection } from '../types'
+import type { FeatureResource } from '../types/resources/feature_resource'
+import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { useApiClient } from './use_api_client'
+import { availableFeatures } from './use_features'
+
+export function useDirectMessagesEnabled(): boolean {
+  const apiClient = useApiClient()
+  const { data, isFetched } = useQuery<ApiCollection<FeatureResource>>({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: () => apiClient.chat.get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs()),
+    staleTime: 1000 * 60 * 5,
+  })
+
+  if (!isFetched) return false
+
+  return (
+    data?.data.some(
+      feature => feature.name === availableFeatures.direct_messages_eap && feature.enabled
+    ) ?? false
+  )
+}

package/src/hooks/use_features.ts

@@ -43,6 +43,7 @@ export const availableFeatures = {
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
+  direct_messages_eap: 'ROLLOUT_direct_messages_eap',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 

package/src/navigation/index.tsx

@@ -2,7 +2,6 @@ import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
   NativeStackHeaderRightProps,
-  NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
@@ -11,9 +10,9 @@ import {
   createMinimalHeaderBackButton,
   withMinimalBack,
   withRightClose,
-  withRightDone,
+  withRightText,
 } from '../components/display/platform_modal_header_buttons'
-import { useDirectMessagesEligible, useQualifiedByAge } from '../hooks'
+import { useDirectMessagesEnabled, useQualifiedByAge } from '../hooks'
 import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
@@ -80,17 +79,13 @@ import {
   SystemMessagePeopleScreenOptions,
 } from '../screens/system_message_people_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
-import { isLiquidGlassEnabled } from '../utils/liquid_glass'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 
-const globalScreenOptions: () => NativeStackNavigationOptions = () => ({
-  headerBackButtonDisplayMode: 'minimal',
-  ...(isLiquidGlassEnabled() ? { headerShadowVisible: false } : {}),
-})
-
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationNewEntry',
-  screenOptions: globalScreenOptions,
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     ConversationNewEntry: {
@@ -101,7 +96,7 @@ export const NewConversationStack = createNativeStackNavigator({
             title: 'New conversation',
             headerBackVisible: false,
           },
-          withRightClose({ onPress: navigation.goBack })
+          withRightText({ text: 'Cancel', onPress: navigation.goBack })
         ),
     },
     ConversationSelectGroupRecipients: {
@@ -111,7 +106,8 @@ export const NewConversationStack = createNativeStackNavigator({
           {
             title: 'New conversation',
           },
-          withRightClose({
+          withRightText({
+            text: 'Cancel',
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
@@ -123,20 +119,22 @@ export const NewConversationStack = createNativeStackNavigator({
           {
             title: 'New conversation',
           },
-          withRightClose({
+          withRightText({
+            text: 'Cancel',
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
     },
     ConversationSelectDirectMessageRecipients: {
       screen: ConversationSelectDirectMessageRecipientsScreen,
-      if: useDirectMessagesEligible,
+      if: useDirectMessagesEnabled,
       options: ({ navigation, route }) =>
         composeOptions(
           {
             title: 'New conversation',
           },
-          withRightClose({
+          withRightText({
+            text: 'Cancel',
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
@@ -153,7 +151,8 @@ export const NewConversationStack = createNativeStackNavigator({
             title: 'New conversation',
             headerLeft: () => null,
           },
-          withRightClose({
+          withRightText({
+            text: 'Cancel',
             onPress: () => {
               const { chat_group_graph_id, group_source_app_name } =
                 route.params as ConversationSelectRecipientsParams
@@ -170,7 +169,9 @@ export const NewConversationStack = createNativeStackNavigator({
 })
 
 export const ChatStack = createNativeStackNavigator({
-  screenOptions: globalScreenOptions,
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     Conversations: {
@@ -250,7 +251,7 @@ export const ChatStack = createNativeStackNavigator({
             presentation: 'modal',
             title: 'Conversation details',
           },
-          withRightDone({ onPress: navigation.goBack })
+          withRightText({ text: 'Done', onPress: navigation.goBack })
         ),
     },
     AvatarPicker: {
@@ -260,41 +261,46 @@ export const ChatStack = createNativeStackNavigator({
     ChatSettings: {
       screen: SettingsScreen,
       options: ({ navigation }) =>
-        composeOptions({ title: 'Chat settings' }, withMinimalBack({ onPress: navigation.goBack })),
+        composeOptions(
+          {
+            title: 'Chat settings',
+            headerBackVisible: false,
+          },
+          withRightText({ text: 'Done', onPress: navigation.goBack })
+        ),
     },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) =>
-        navigation.getState().index === 0
-          ? composeOptions(
-              { title: 'Chat notifications' },
-              withRightClose({ onPress: navigation.goBack })
-            )
-          : composeOptions(
-              { title: 'Chat notifications' },
-              withMinimalBack({ onPress: navigation.goBack })
-            ),
+        composeOptions(
+          {
+            title: 'Chat',
+            headerBackVisible: false,
+          },
+          withRightText({ text: 'Done', onPress: navigation.goBack })
+        ),
     },
     PreferredAppSelection: {
       screen: PreferredAppSelectionScreen,
-      options: ({ navigation }) =>
-        composeOptions({ title: 'Preferred app' }, withMinimalBack({ onPress: navigation.goBack })),
+      options: {
+        title: 'Preferred app',
+      },
     },
     GroupNotificationSettings: {
       screen: GroupNotificationSettingsScreen,
       options: ({ route, navigation }) => {
         const title = (route.params as { title?: string })?.title || 'Group Settings'
 
-        // The dismiss button only shows when this is the entry screen (e.g.
-        // deep links); deeper in the stack the back button covers dismissal.
+        // Done only shows when this is the entry screen (e.g. deep links);
+        // deeper in the stack the back button covers dismissal.
         return navigation.getState().index === 0
           ? composeOptions(
               {
                 title,
               },
-              withRightClose({ onPress: navigation.goBack })
+              withRightText({ text: 'Done', onPress: navigation.goBack })
             )
-          : composeOptions({ title }, withMinimalBack({ onPress: navigation.goBack }))
+          : { title }
       },
     },
     GroupNotificationLevelSelect: {
@@ -322,7 +328,7 @@ export const ChatStack = createNativeStackNavigator({
             title: 'New conversation',
             headerLeft: () => null,
           },
-          withRightClose({ onPress: () => navigation.getParent()?.goBack() })
+          withRightText({ text: 'Cancel', onPress: () => navigation.getParent()?.goBack() })
         ),
     },
     SendGiphy: {
@@ -371,7 +377,7 @@ export const ChatStack = createNativeStackNavigator({
             headerBackVisible: false,
             presentation: 'modal',
           },
-          withRightClose({ onPress: navigation.goBack })
+          withRightText({ text: 'Close', onPress: navigation.goBack })
         ),
     },
     NotFound: {

package/src/screens/bug_report_screen.tsx

@@ -28,7 +28,7 @@ import {
   composeOptions,
   HeaderDismissButton,
   useHeaderRight,
-  withLeftClose,
+  withLeftText,
 } from '../components/display/platform_modal_header_buttons'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { DefaultLoading } from '../components/page/loading'
@@ -60,7 +60,7 @@ export const BugReportScreenOptions = ({
 }: NativeStackScreenProps<any>): NativeStackNavigationOptions =>
   composeOptions(
     { presentation: 'modal', title: 'Report a bug' },
-    withLeftClose({ onPress: () => navigation.goBack() })
+    withLeftText({ text: 'Cancel', onPress: () => navigation.goBack() })
   )
 
 interface Attachment {
@@ -158,13 +158,7 @@ export function BugReportScreen() {
     return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
   }
 
-  useHeaderRight({
-    icon: 'general.message',
-    accessibilityLabel: 'Submit',
-    variant: 'fill',
-    onPress: handleSubmit,
-    disabled: !formValid,
-  })
+  useHeaderRight({ title: 'Submit', onPress: handleSubmit, disabled: !formValid })
 
   if (status === 'pending') {
     return (

package/src/screens/conversation_details_screen.tsx

@@ -223,8 +223,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   )
 
   useHeaderRight({
-    icon: 'general.check',
-    accessibilityLabel: 'Done',
+    title: 'Done',
     onPress: () => {
       saveTitle({ title: trimmedTitle || conversation.title })
       navigation.goBack()

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -4,7 +4,7 @@ import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
 import {
   useAtFontScaleBreakpoint,
-  useDirectMessagesEligible,
+  useDirectMessagesEnabled,
   useHasDirectMessages,
   useTheme,
 } from '../../../hooks'
@@ -59,9 +59,9 @@ export const ConversationFilters = () => {
   const { setScrollOffset, params } = useContext(FilterContext)
   const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
 
-  const directMessagesEligible = useDirectMessagesEligible()
+  const directMessagesEnabled = useDirectMessagesEnabled()
   const hasDirectMessages = useHasDirectMessages()
-  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {