@planningcenter/chat-react-native 3.22.0 → 3.23.0-rc.0

package/build/screens/conversations/components/list_header_action_button.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PressableProps } from 'react-native';
+import { type IconString } from '../../../components/display/icon';
+interface ListHeaderActionButtonProps extends PressableProps {
+    /**
+     * Provides context to screen readers about what the button does.
+     */
+    accessibilityLabel: string;
+    /**
+     * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+     */
+    maxFontSizeMultiplier?: number;
+    /**
+     * Generates an icon from `@planningcenter/icons`
+     */
+    name: IconString;
+}
+export declare function ListHeaderActionButton({ accessibilityLabel, maxFontSizeMultiplier, name, ...props }: ListHeaderActionButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=list_header_action_button.d.ts.map

package/build/screens/conversations/components/list_header_action_button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_header_action_button.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAKxE,UAAU,2BAA4B,SAAQ,cAAc;IAC1D;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;CACjB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,kBAAkB,EAClB,qBAAqB,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,2BAA2B,qBAsB7B"}

package/build/screens/conversations/components/list_header_action_button.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { Icon } from '../../../components/display/icon';
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../../hooks';
+import { platformPressedOpacityStyle } from '../../../utils';
+import { tokens } from '../../../vendor/tapestry/tokens';
+export function ListHeaderActionButton({ accessibilityLabel, maxFontSizeMultiplier, name, ...props }) {
+    const styles = useStyles({ maxFontSizeMultiplier });
+    const { colors } = useTheme();
+    const androidRippleColor = useCreateAndroidRippleColor({
+        color: colors.iconColorDefaultSecondary,
+    });
+    return (<Pressable style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]} accessibilityRole="button" accessibilityLabel={accessibilityLabel} android_ripple={{
+            color: androidRippleColor,
+            borderless: false,
+            foreground: true,
+        }} {...props}>
+      <Icon name={name} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier}/>
+    </Pressable>);
+}
+const useStyles = ({ maxFontSizeMultiplier }) => {
+    const { colors, button } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    return StyleSheet.create({
+        pressable: {
+            borderRadius: button.borderRadius * fontScale,
+            borderWidth: 1,
+            borderColor: colors.borderColorDefaultBase,
+            backgroundColor: 'transparent',
+            paddingHorizontal: 16 * fontScale,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 32 * fontScale,
+            gap: 6 * fontScale,
+            overflow: 'hidden',
+        },
+        icon: {
+            fontSize: tokens.fontSizeSm * fontScale,
+            color: colors.iconColorDefaultSecondary,
+        },
+    });
+};
+//# sourceMappingURL=list_header_action_button.js.map

package/build/screens/conversations/components/list_header_action_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_header_action_button.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAmB,MAAM,kCAAkC,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA;AACpF,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AAiBxD,MAAM,UAAU,sBAAsB,CAAC,EACrC,kBAAkB,EAClB,qBAAqB,EACrB,IAAI,EACJ,GAAG,KAAK,EACoB;IAC5B,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAA;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,kBAAkB,GAAG,2BAA2B,CAAC;QACrD,KAAK,EAAE,MAAM,CAAC,yBAAyB;KACxC,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,2BAA2B,CAAC,CAAC,CACnF,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,cAAc,CAAC,CAAC;YACd,KAAK,EAAE,kBAAkB;YACzB,UAAU,EAAE,KAAK;YACjB,UAAU,EAAE,IAAI;SACjB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,EACrF;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,qBAAqB,EAAwC,EAAE,EAAE;IACpF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IACrC,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAA;IAEzD,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,YAAY,EAAE,MAAM,CAAC,YAAY,GAAG,SAAS;YAC7C,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,sBAAsB;YAC1C,eAAe,EAAE,aAAa;YAC9B,iBAAiB,EAAE,EAAE,GAAG,SAAS;YACjC,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,EAAE,GAAG,SAAS;YACtB,GAAG,EAAE,CAAC,GAAG,SAAS;YAClB,QAAQ,EAAE,QAAQ;SACnB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,UAAU,GAAG,SAAS;YACvC,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps } from 'react-native'\nimport { Icon, type IconString } from '../../../components/display/icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../../hooks'\nimport { platformPressedOpacityStyle } from '../../../utils'\nimport { tokens } from '../../../vendor/tapestry/tokens'\n\ninterface ListHeaderActionButtonProps extends PressableProps {\n  /**\n   * Provides context to screen readers about what the button does.\n   */\n  accessibilityLabel: string\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Generates an icon from `@planningcenter/icons`\n   */\n  name: IconString\n}\n\nexport function ListHeaderActionButton({\n  accessibilityLabel,\n  maxFontSizeMultiplier,\n  name,\n  ...props\n}: ListHeaderActionButtonProps) {\n  const styles = useStyles({ maxFontSizeMultiplier })\n  const { colors } = useTheme()\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: colors.iconColorDefaultSecondary,\n  })\n\n  return (\n    <Pressable\n      style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      android_ripple={{\n        color: androidRippleColor,\n        borderless: false,\n        foreground: true,\n      }}\n      {...props}\n    >\n      <Icon name={name} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier} />\n    </Pressable>\n  )\n}\n\nconst useStyles = ({ maxFontSizeMultiplier }: Partial<ListHeaderActionButtonProps>) => {\n  const { colors, button } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  return StyleSheet.create({\n    pressable: {\n      borderRadius: button.borderRadius * fontScale,\n      borderWidth: 1,\n      borderColor: colors.borderColorDefaultBase,\n      backgroundColor: 'transparent',\n      paddingHorizontal: 16 * fontScale,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: 32 * fontScale,\n      gap: 6 * fontScale,\n      overflow: 'hidden',\n    },\n    icon: {\n      fontSize: tokens.fontSizeSm * fontScale,\n      color: colors.iconColorDefaultSecondary,\n    },\n  })\n}\n"]}

package/build/screens/conversations/components/list_header_component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAoBnD,eAAO,MAAM,mBAAmB,yBAmH/B,CAAA"}
+{"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAuBnD,eAAO,MAAM,mBAAmB,yBAuJ/B,CAAA"}

package/build/screens/conversations/components/list_header_component.js

@@ -5,9 +5,12 @@ import { Heading, TextButton, ToggleButton } from '../../../components';
 import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks';
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
 import { useCanDisplayGroups } from '../../../hooks/use_groups';
+import { useCanCreateConversations } from '../../../hooks';
+import { useAppName } from '../../../hooks/use_app_name';
 import { ChatGroupBadge } from './chat_group_badge';
 import { Haptic } from '../../../utils/native_adapters';
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils';
+import { ListHeaderActionButton } from './list_header_action_button';
 const ROW_PADDING_HORIZONTAL = 16;
 var FilterTypes;
 (function (FilterTypes) {
@@ -25,6 +28,8 @@ export const ListHeaderComponent = () => {
     const { chat_group_graph_id, group_source_app_name = '' } = route.params || {};
     const currentPersonCache = useCurrentPersonCache();
     const { markAllRead, isPending } = useMarkAllRead();
+    const canCreateConversations = useCanCreateConversations();
+    const appName = useAppName();
     const active = useMemo(() => {
         if (chat_group_graph_id) {
             return FilterTypes.More;
@@ -37,6 +42,17 @@ export const ListHeaderComponent = () => {
         }
         return FilterTypes.All;
     }, [chat_group_graph_id, group_source_app_name]);
+    const handleNewConversationNavigation = useCallback(() => {
+        return navigation.navigate('New', {
+            screen: 'ConversationSelectRecipients',
+            params: {
+                ...route.params,
+            },
+        });
+    }, [navigation, route.params]);
+    const handleGetHelp = useCallback(() => {
+        navigation.navigate('GetHelp', { type: 'chat' });
+    }, [navigation]);
     const handleMarkAllRead = useCallback(() => {
         currentPersonCache.update({ unreadCount: 0 });
         Haptic.notificationSuccess();
@@ -52,13 +68,19 @@ export const ListHeaderComponent = () => {
     }, [active, handleMarkAllRead]);
     const showAppFilters = canFilterByGroups && canFilterByTeams;
     return (<View style={styles.listHeader}>
-      <View style={styles.titleRow}>
-        <Heading numberOfLines={1} variant="h2">
-          Conversations
-        </Heading>
-        <TextButton onPress={alertMarkAllRead} disabled={isPending} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle="Mark all read">
-          Mark all read
-        </TextButton>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton onPress={alertMarkAllRead} disabled={isPending} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle="Mark all read">
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          {canCreateConversations && (<ListHeaderActionButton name="churchCenter.signups" onPress={handleNewConversationNavigation} accessibilityLabel="New conversation" testID="conversations-new-conversation-button" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>)}
+          {appName !== 'services' && (<ListHeaderActionButton name="general.outlinedInfoCircle" onPress={handleGetHelp} accessibilityLabel="Get help" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>)}
+        </View>
       </View>
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filterRow} accessibilityRole="toolbar">
         {showAppFilters && (<>
@@ -92,19 +114,27 @@ const useStyles = () => {
             borderBottomWidth: 1,
             borderBottomColor: theme.colors.fillColorNeutral050Base,
             paddingBottom: 16,
-            gap: 12,
+            gap: 16,
         },
-        titleRow: {
+        headingRow: {
+            gap: 12,
             flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
-            justifyContent: 'space-between',
             alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
-            flexWrap: 'wrap',
-            rowGap: 8,
-            columnGap: 16,
-            paddingTop: 8,
+            justifyContent: 'space-between',
             paddingBottom: atFontScaleBreakpoint ? 4 : 0,
             paddingHorizontal: ROW_PADDING_HORIZONTAL,
         },
+        titleContainer: {
+            gap: 8,
+        },
+        actionsContainer: {
+            flexDirection: 'row',
+            gap: 8,
+            alignItems: 'center',
+        },
+        markAllReadRow: {
+            paddingBottom: 4,
+        },
         filterRow: {
             flexDirection: 'row',
             justifyContent: 'flex-start',

package/build/screens/conversations/components/list_header_component.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    Haptic.notificationSuccess()\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const showAppFilters = canFilterByGroups && canFilterByTeams\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.titleRow}>\n        <Heading numberOfLines={1} variant=\"h2\">\n          Conversations\n        </Heading>\n        <TextButton\n          onPress={alertMarkAllRead}\n          disabled={isPending}\n          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n          accessibilityShowsLargeContentViewer\n          accessibilityLargeContentTitle=\"Mark all read\"\n        >\n          Mark all read\n        </TextButton>\n      </View>\n      <ScrollView\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        contentContainerStyle={styles.filterRow}\n        accessibilityRole=\"toolbar\"\n      >\n        {showAppFilters && (\n          <>\n            <ToggleButton\n              title={FilterTypes.All}\n              active={active === FilterTypes.All}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: undefined,\n                })\n              }\n              accessibilityLabel=\"Show all conversations\"\n            />\n            <ToggleButton\n              title={FilterTypes.Groups}\n              active={active === FilterTypes.Groups}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Groups',\n                })\n              }\n              accessibilityLabel=\"Filter to group conversations\"\n            />\n\n            <ToggleButton\n              title={FilterTypes.Teams}\n              active={active === FilterTypes.Teams}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Services',\n                })\n              }\n              accessibilityLabel=\"Filter to team conversations\"\n            />\n          </>\n        )}\n        <ToggleButton\n          title={showAppFilters ? FilterTypes.More : 'Filter'}\n          onPress={() =>\n            navigation.navigate('ConversationFilters', {\n              chat_group_graph_id,\n              group_source_app_name,\n            })\n          }\n          active={active === FilterTypes.More}\n          iconNameRight=\"general.threeReducingHorizontalBars\"\n          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n        />\n      </ScrollView>\n      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingBottom: 16,\n      gap: 12,\n    },\n    titleRow: {\n      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n      justifyContent: 'space-between',\n      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n      flexWrap: 'wrap',\n      rowGap: 8,\n      columnGap: 16,\n      paddingTop: 8,\n      paddingBottom: atFontScaleBreakpoint ? 4 : 0,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n  })\n}\n"]}
+{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { useCanCreateConversations } from '../../../hooks'\nimport { useAppName } from '../../../hooks/use_app_name'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\nimport { ListHeaderActionButton } from './list_header_action_button'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n  const canCreateConversations = useCanCreateConversations()\n  const appName = useAppName()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const handleNewConversationNavigation = useCallback(() => {\n    return navigation.navigate('New', {\n      screen: 'ConversationSelectRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }, [navigation, route.params])\n\n  const handleGetHelp = useCallback(() => {\n    navigation.navigate('GetHelp', { type: 'chat' })\n  }, [navigation])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    Haptic.notificationSuccess()\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const showAppFilters = canFilterByGroups && canFilterByTeams\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.headingRow}>\n        <View style={styles.titleContainer}>\n          <Heading numberOfLines={1} variant=\"h2\">\n            Conversations\n          </Heading>\n          <TextButton\n            onPress={alertMarkAllRead}\n            disabled={isPending}\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            accessibilityShowsLargeContentViewer\n            accessibilityLargeContentTitle=\"Mark all read\"\n          >\n            Mark all read\n          </TextButton>\n        </View>\n        <View style={styles.actionsContainer}>\n          {canCreateConversations && (\n            <ListHeaderActionButton\n              name=\"churchCenter.signups\"\n              onPress={handleNewConversationNavigation}\n              accessibilityLabel=\"New conversation\"\n              testID=\"conversations-new-conversation-button\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n          {appName !== 'services' && (\n            <ListHeaderActionButton\n              name=\"general.outlinedInfoCircle\"\n              onPress={handleGetHelp}\n              accessibilityLabel=\"Get help\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n            />\n          )}\n        </View>\n      </View>\n      <ScrollView\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        contentContainerStyle={styles.filterRow}\n        accessibilityRole=\"toolbar\"\n      >\n        {showAppFilters && (\n          <>\n            <ToggleButton\n              title={FilterTypes.All}\n              active={active === FilterTypes.All}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: undefined,\n                })\n              }\n              accessibilityLabel=\"Show all conversations\"\n            />\n            <ToggleButton\n              title={FilterTypes.Groups}\n              active={active === FilterTypes.Groups}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Groups',\n                })\n              }\n              accessibilityLabel=\"Filter to group conversations\"\n            />\n\n            <ToggleButton\n              title={FilterTypes.Teams}\n              active={active === FilterTypes.Teams}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Services',\n                })\n              }\n              accessibilityLabel=\"Filter to team conversations\"\n            />\n          </>\n        )}\n        <ToggleButton\n          title={showAppFilters ? FilterTypes.More : 'Filter'}\n          onPress={() =>\n            navigation.navigate('ConversationFilters', {\n              chat_group_graph_id,\n              group_source_app_name,\n            })\n          }\n          active={active === FilterTypes.More}\n          iconNameRight=\"general.threeReducingHorizontalBars\"\n          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n        />\n      </ScrollView>\n      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingBottom: 16,\n      gap: 16,\n    },\n    headingRow: {\n      gap: 12,\n      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n      justifyContent: 'space-between',\n      paddingBottom: atFontScaleBreakpoint ? 4 : 0,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n    titleContainer: {\n      gap: 8,\n    },\n    actionsContainer: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n    markAllReadRow: {\n      paddingBottom: 4,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n      paddingHorizontal: ROW_PADDING_HORIZONTAL,\n    },\n  })\n}\n"]}

package/build/screens/conversations/conversations_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAA;AAK9D,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,qBA2DtE"}
+{"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAA;AAG9D,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,qBAYtE"}

package/build/screens/conversations/conversations_screen.js

@@ -1,64 +1,18 @@
-import { useNavigation } from '@react-navigation/native';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Conversations, TextButton } from '../../components';
-import { ActionButton } from '../../components/display/action_button';
+import { Conversations } from '../../components';
 import { ConversationsContextProvider } from '../../contexts/conversations_context';
-import { useCanCreateConversations, usePublishProductAnalyticsEvent } from '../../hooks';
-import { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
+import { usePublishProductAnalyticsEvent } from '../../hooks';
 import { ListHeaderComponent } from './components/list_header_component';
-import { useAppName } from '../../hooks/use_app_name';
 export function ConversationsScreen({ route }) {
-    const navigation = useNavigation();
-    const canCreateConversations = useCanCreateConversations();
     const styles = useStyles();
-    const appName = useAppName();
-    const { chat_group_graph_id } = route.params || {};
-    const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id);
-    const handleNewConversationNavigation = () => {
-        if (sourceAppName === 'Services') {
-            return navigation.navigate('New', {
-                screen: 'ConversationNew',
-                params: {
-                    team_ids: sourceId ? [sourceId] : [],
-                    source_app_name: sourceAppName,
-                    ...route.params,
-                },
-            });
-        }
-        if (sourceAppName === 'Groups') {
-            return navigation.navigate('New', {
-                screen: 'ConversationNew',
-                params: {
-                    group_id: sourceId,
-                    source_app_name: sourceAppName,
-                    ...route.params,
-                },
-            });
-        }
-        return navigation.navigate('New', {
-            screen: 'ConversationSelectRecipients',
-            params: {
-                ...route.params,
-            },
-        });
-    };
-    const handleGetHelp = useCallback(() => {
-        navigation.navigate('GetHelp', { type: 'chat' });
-    }, [navigation]);
     usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened');
     return (<View style={styles.container}>
       <ConversationsContextProvider args={route.params}>
         <Conversations ListHeaderComponent={ListHeaderComponent}/>
       </ConversationsContextProvider>
-      <ActionButton visible={canCreateConversations} title="New conversation" onPress={handleNewConversationNavigation} buttonIconNameLeft="churchCenter.signups" secondaryButton={appName === 'services' ? null : <GetHelpButton onPress={handleGetHelp}/>}/>
     </View>);
 }
-const GetHelpButton = ({ onPress }) => {
-    return (<TextButton variant="tertiary" onPress={onPress} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle="Get help">
-      Get help
-    </TextButton>);
-};
 const useStyles = () => {
     return StyleSheet.create({
         container: {

package/build/screens/conversations/conversations_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, { useCallback } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations, TextButton } from '../../components'\nimport { ActionButton } from '../../components/display/action_button'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { useCanCreateConversations, usePublishProductAnalyticsEvent } from '../../hooks'\nimport { AppName } from '../../types/resources/app_name'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { ListHeaderComponent } from './components/list_header_component'\nimport { useAppName } from '../../hooks/use_app_name'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n  const navigation = useNavigation()\n  const canCreateConversations = useCanCreateConversations()\n  const styles = useStyles()\n  const appName = useAppName()\n\n  const { chat_group_graph_id } = route.params || {}\n  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)\n\n  const handleNewConversationNavigation = () => {\n    if (sourceAppName === 'Services') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          team_ids: sourceId ? [sourceId] : [],\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n    if (sourceAppName === 'Groups') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          group_id: sourceId,\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n\n    return navigation.navigate('New', {\n      screen: 'ConversationSelectRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }\n\n  const handleGetHelp = useCallback(() => {\n    navigation.navigate('GetHelp', { type: 'chat' })\n  }, [navigation])\n\n  usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened')\n\n  return (\n    <View style={styles.container}>\n      <ConversationsContextProvider args={route.params}>\n        <Conversations ListHeaderComponent={ListHeaderComponent} />\n      </ConversationsContextProvider>\n      <ActionButton\n        visible={canCreateConversations}\n        title=\"New conversation\"\n        onPress={handleNewConversationNavigation}\n        buttonIconNameLeft=\"churchCenter.signups\"\n        secondaryButton={appName === 'services' ? null : <GetHelpButton onPress={handleGetHelp} />}\n      />\n    </View>\n  )\n}\n\nconst GetHelpButton = ({ onPress }: { onPress: () => void }) => {\n  return (\n    <TextButton\n      variant=\"tertiary\"\n      onPress={onPress}\n      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n      accessibilityShowsLargeContentViewer\n      accessibilityLargeContentTitle=\"Get help\"\n    >\n      Get help\n    </TextButton>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAA;AACnF,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAA;AAG7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAQxE,MAAM,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAA4B;IACrE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,+BAA+B,CAAC,wCAAwC,CAAC,CAAA;IAEzE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAC/C;QAAA,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAC1D;MAAA,EAAE,4BAA4B,CAChC;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations } from '../../components'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { usePublishProductAnalyticsEvent } from '../../hooks'\nimport { AppName } from '../../types/resources/app_name'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { ListHeaderComponent } from './components/list_header_component'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n  const styles = useStyles()\n\n  usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened')\n\n  return (\n    <View style={styles.container}>\n      <ConversationsContextProvider args={route.params}>\n        <Conversations ListHeaderComponent={ListHeaderComponent} />\n      </ConversationsContextProvider>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.22.0",
+  "version": "3.23.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "e3f6bdda7bac0715b030e841280ac34e3dabf7e5"
+  "gitHead": "f605c9a6427e283a34ef21e39b41849832b0d0cb"
 }

package/src/screens/conversations/components/list_header_action_button.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import type { PressableProps } from 'react-native'
+import { Icon, type IconString } from '../../../components/display/icon'
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../../hooks'
+import { platformPressedOpacityStyle } from '../../../utils'
+import { tokens } from '../../../vendor/tapestry/tokens'
+
+interface ListHeaderActionButtonProps extends PressableProps {
+  /**
+   * Provides context to screen readers about what the button does.
+   */
+  accessibilityLabel: string
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
+  /**
+   * Generates an icon from `@planningcenter/icons`
+   */
+  name: IconString
+}
+
+export function ListHeaderActionButton({
+  accessibilityLabel,
+  maxFontSizeMultiplier,
+  name,
+  ...props
+}: ListHeaderActionButtonProps) {
+  const styles = useStyles({ maxFontSizeMultiplier })
+  const { colors } = useTheme()
+  const androidRippleColor = useCreateAndroidRippleColor({
+    color: colors.iconColorDefaultSecondary,
+  })
+
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      android_ripple={{
+        color: androidRippleColor,
+        borderless: false,
+        foreground: true,
+      }}
+      {...props}
+    >
+      <Icon name={name} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier} />
+    </Pressable>
+  )
+}
+
+const useStyles = ({ maxFontSizeMultiplier }: Partial<ListHeaderActionButtonProps>) => {
+  const { colors, button } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+
+  return StyleSheet.create({
+    pressable: {
+      borderRadius: button.borderRadius * fontScale,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      backgroundColor: 'transparent',
+      paddingHorizontal: 16 * fontScale,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 32 * fontScale,
+      gap: 6 * fontScale,
+      overflow: 'hidden',
+    },
+    icon: {
+      fontSize: tokens.fontSizeSm * fontScale,
+      color: colors.iconColorDefaultSecondary,
+    },
+  })
+}

package/src/screens/conversations/components/list_header_component.tsx

@@ -5,10 +5,13 @@ import { Heading, TextButton, ToggleButton } from '../../../components'
 import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useCanCreateConversations } from '../../../hooks'
+import { useAppName } from '../../../hooks/use_app_name'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
 import { Haptic } from '../../../utils/native_adapters'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { ListHeaderActionButton } from './list_header_action_button'
 
 const ROW_PADDING_HORIZONTAL = 16
 
@@ -28,6 +31,8 @@ export const ListHeaderComponent = () => {
   const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const appName = useAppName()
 
   const active: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -41,6 +46,19 @@ export const ListHeaderComponent = () => {
     return FilterTypes.All
   }, [chat_group_graph_id, group_source_app_name])
 
+  const handleNewConversationNavigation = useCallback(() => {
+    return navigation.navigate('New', {
+      screen: 'ConversationSelectRecipients',
+      params: {
+        ...route.params,
+      },
+    })
+  }, [navigation, route.params])
+
+  const handleGetHelp = useCallback(() => {
+    navigation.navigate('GetHelp', { type: 'chat' })
+  }, [navigation])
+
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
     Haptic.notificationSuccess()
@@ -60,19 +78,40 @@ export const ListHeaderComponent = () => {
 
   return (
     <View style={styles.listHeader}>
-      <View style={styles.titleRow}>
-        <Heading numberOfLines={1} variant="h2">
-          Conversations
-        </Heading>
-        <TextButton
-          onPress={alertMarkAllRead}
-          disabled={isPending}
-          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-          accessibilityShowsLargeContentViewer
-          accessibilityLargeContentTitle="Mark all read"
-        >
-          Mark all read
-        </TextButton>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {appName !== 'services' && (
+            <ListHeaderActionButton
+              name="general.outlinedInfoCircle"
+              onPress={handleGetHelp}
+              accessibilityLabel="Get help"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+        </View>
       </View>
       <ScrollView
         horizontal
@@ -145,19 +184,27 @@ const useStyles = () => {
       borderBottomWidth: 1,
       borderBottomColor: theme.colors.fillColorNeutral050Base,
       paddingBottom: 16,
-      gap: 12,
+      gap: 16,
     },
-    titleRow: {
+    headingRow: {
+      gap: 12,
       flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
-      justifyContent: 'space-between',
       alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
-      flexWrap: 'wrap',
-      rowGap: 8,
-      columnGap: 16,
-      paddingTop: 8,
+      justifyContent: 'space-between',
       paddingBottom: atFontScaleBreakpoint ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
+    titleContainer: {
+      gap: 8,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      paddingBottom: 4,
+    },
     filterRow: {
       flexDirection: 'row',
       justifyContent: 'flex-start',

package/src/screens/conversations/conversations_screen.tsx

@@ -1,15 +1,12 @@
-import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { useCallback } from 'react'
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Conversations, TextButton } from '../../components'
-import { ActionButton } from '../../components/display/action_button'
+import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
-import { useCanCreateConversations, usePublishProductAnalyticsEvent } from '../../hooks'
+import { usePublishProductAnalyticsEvent } from '../../hooks'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
-import { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
-import { useAppName } from '../../hooks/use_app_name'
 
 export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
@@ -18,47 +15,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
-  const navigation = useNavigation()
-  const canCreateConversations = useCanCreateConversations()
   const styles = useStyles()
-  const appName = useAppName()
-
-  const { chat_group_graph_id } = route.params || {}
-  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)
-
-  const handleNewConversationNavigation = () => {
-    if (sourceAppName === 'Services') {
-      return navigation.navigate('New', {
-        screen: 'ConversationNew',
-        params: {
-          team_ids: sourceId ? [sourceId] : [],
-          source_app_name: sourceAppName,
-          ...route.params,
-        },
-      })
-    }
-    if (sourceAppName === 'Groups') {
-      return navigation.navigate('New', {
-        screen: 'ConversationNew',
-        params: {
-          group_id: sourceId,
-          source_app_name: sourceAppName,
-          ...route.params,
-        },
-      })
-    }
-
-    return navigation.navigate('New', {
-      screen: 'ConversationSelectRecipients',
-      params: {
-        ...route.params,
-      },
-    })
-  }
-
-  const handleGetHelp = useCallback(() => {
-    navigation.navigate('GetHelp', { type: 'chat' })
-  }, [navigation])
 
   usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened')
 
@@ -67,31 +24,10 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
       <ConversationsContextProvider args={route.params}>
         <Conversations ListHeaderComponent={ListHeaderComponent} />
       </ConversationsContextProvider>
-      <ActionButton
-        visible={canCreateConversations}
-        title="New conversation"
-        onPress={handleNewConversationNavigation}
-        buttonIconNameLeft="churchCenter.signups"
-        secondaryButton={appName === 'services' ? null : <GetHelpButton onPress={handleGetHelp} />}
-      />
     </View>
   )
 }
 
-const GetHelpButton = ({ onPress }: { onPress: () => void }) => {
-  return (
-    <TextButton
-      variant="tertiary"
-      onPress={onPress}
-      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-      accessibilityShowsLargeContentViewer
-      accessibilityLargeContentTitle="Get help"
-    >
-      Get help
-    </TextButton>
-  )
-}
-
 const useStyles = () => {
   return StyleSheet.create({
     container: {