@planningcenter/chat-react-native 3.24.4 → 3.24.5-qa-563.0

package/src/screens/conversation_screen.tsx

@@ -39,7 +39,6 @@ import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 
 export type ConversationRouteProps = {
@@ -53,6 +52,7 @@ export type ConversationRouteProps = {
   subtitle?: string
   badge?: ConversationBadgeResource
   deleted?: boolean
+  muted?: boolean
 }
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
@@ -91,12 +91,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const { featureEnabled } = useFeatures()
-  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
   const messagesWithSeparators = groupMessages({
     ms: messages,
     inReplyScreen: !!reply_root_id,
-    repliesEnabled,
   })
   const noMessages = messagesWithSeparators.length === 0
 
@@ -109,6 +106,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const replyHeaderTitle = replyRootAuthorFirstName
     ? `Reply to ${replyRootAuthorFirstName}`
     : 'Reply'
+  // Prefer the membership for optimistic updates.
+  const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
@@ -134,9 +133,10 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         title: title,
         badge: badges?.[0],
         deleted: conversation?.deleted,
+        muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -195,7 +195,6 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
                   conversation_id={conversation_id}
                   latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
                   inReplyScreen={!!reply_root_id}
-                  repliesEnabled={repliesEnabled}
                 />
               )
             }}
@@ -284,14 +283,9 @@ type ReplyShadowMessage = {
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
-  repliesEnabled?: boolean
 }
 
-export const groupMessages = ({
-  ms,
-  inReplyScreen,
-  repliesEnabled = false,
-}: GroupMessagesProps) => {
+export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
   let enrichedMessages: (MessageResource | DateSeparator | ReplyShadowMessage)[] = []
   let encounteredOneOfMyMessages = false
 
@@ -335,7 +329,6 @@ export const groupMessages = ({
         prevMessageDifferentThread ||
         prevMessageIsDateSeparator)
     const nextIsReplyShadowMessage =
-      repliesEnabled &&
       nextMessageInThread &&
       !nextMessageThreadRoot &&
       (nextMessageDifferentThread || nextMessageIsDateSeparator)
@@ -369,7 +362,7 @@ export const groupMessages = ({
 
     enrichedMessages.push(message)
 
-    if (insertReplyShadowMessage && repliesEnabled) {
+    if (insertReplyShadowMessage) {
       enrichedMessages.push({
         type: 'ReplyShadowMessage',
         id: `${message.id}-${message.replyRootId}`,
@@ -390,6 +383,7 @@ interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
   deleted?: boolean
+  muted?: boolean
 }
 
 export const ConversationScreenTitle = ({
@@ -398,6 +392,7 @@ export const ConversationScreenTitle = ({
   children,
   style,
   deleted,
+  muted,
 }: ConversationScreenTitleProps) => {
   const styles = usePressableHeaderStyle()
   const navigation = useNavigation()
@@ -416,9 +411,12 @@ export const ConversationScreenTitle = ({
       }}
     >
       <View style={styles.titleWrapper}>
-        <HeaderTitle maxFontSizeMultiplier={1} style={style}>
-          {children}
-        </HeaderTitle>
+        <View style={styles.titleTextContainer}>
+          <HeaderTitle maxFontSizeMultiplier={1} style={style}>
+            {children}
+          </HeaderTitle>
+        </View>
+        {muted && <Icon name="general.bellMuted" size={12} />}
         {!deleted && <Icon name="general.downChevron" size={12} />}
       </View>
       <Badge
@@ -438,6 +436,7 @@ const usePressableHeaderStyle = () => {
     container: {
       alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
       marginRight: Platform.select({ ios: 20, default: 16 }),
+      flex: 1,
     },
     titleWrapper: {
       alignItems: 'center',
@@ -445,6 +444,10 @@ const usePressableHeaderStyle = () => {
       flexDirection: 'row',
       flexShrink: 1,
     },
+    titleTextContainer: {
+      flexShrink: 1,
+      minWidth: 0,
+    },
     badge: {
       alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
       marginTop: 2,

package/src/screens/group_notification_level_select_screen.tsx

@@ -0,0 +1,62 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { PressableRow } from '../components'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useTheme } from '../hooks'
+import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+
+export const GroupNotificationLevelSelectScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Notification level',
+  sheetAllowedDetents: [0.35],
+})
+
+export type GroupNotificationLevelSelectScreenProps = StaticScreenProps<{
+  groupId: number | string
+}>
+
+export function GroupNotificationLevelSelectScreen({
+  route,
+}: GroupNotificationLevelSelectScreenProps) {
+  const { groupId } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const { data: group } = useGroup({ groupId })
+  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
+
+  const notificationLevelOptions = group.myGroupMembership?.notificationLevelOptions ?? []
+
+  const handleSelect = (value: string, isActive: boolean) => {
+    if (!isActive) {
+      updateNotificationLevel({ notificationLevel: value })
+    }
+    navigation.goBack()
+  }
+
+  return (
+    <FormSheet.Root contentStyle={styles.content}>
+      {notificationLevelOptions.map(option => (
+        <PressableRow
+          key={option.value}
+          text={option.description}
+          isActive={option.enabled}
+          onPress={() => handleSelect(option.value, option.enabled)}
+          iconColor={colors.statusSuccessIcon}
+          style={styles.row}
+        />
+      ))}
+    </FormSheet.Root>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    content: {
+      paddingTop: 20,
+    },
+    row: {
+      borderBottomWidth: 0,
+    },
+  })
+}

package/src/screens/group_notification_settings_screen.tsx

@@ -1,10 +1,17 @@
+import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Heading, Switch, Text } from '../components'
+import { Platform, StyleSheet, View } from 'react-native'
+import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
-import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+import { useGroup } from './notification_settings/hooks/groups'
+import type { GroupNotificationLevelSelectScreenProps } from './group_notification_level_select_screen'
+
+type GroupNotificationSettingsStackParamList = {
+  GroupNotificationLevelSelect: GroupNotificationLevelSelectScreenProps['route']['params']
+}
 
 export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
   groupId: number | string
@@ -13,12 +20,12 @@ export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
 
 export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
   const { groupId, title } = route.params
-  const navigation = useNavigation()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<GroupNotificationSettingsStackParamList>>()
   const styles = useStyles()
   const { data: group } = useGroup({ groupId })
-  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
 
-  const notificationsEnabled = group.myGroupMembership?.notificationLevel === 'everything'
+  const notificationLevelDescription = group.myGroupMembership?.notificationLevelDescription
 
   useEffect(() => {
     if (!group.name || title === group.name) return
@@ -26,9 +33,8 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
     navigation.setOptions({ title: group.name })
   }, [group.name, title, navigation])
 
-  const handleToggle = (value: boolean) => {
-    const notificationLevel = value ? 'everything' : 'nothing'
-    updateNotificationLevel(notificationLevel)
+  const handleOpenSelector = () => {
+    navigation.navigate('GroupNotificationLevelSelect', { groupId })
   }
 
   return (
@@ -44,10 +50,30 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
           </Text>
         </View>
       </View>
-      <View style={styles.settingRow}>
-        <Text>Enable notifications</Text>
-        <Switch value={notificationsEnabled} onValueChange={handleToggle} />
-      </View>
+      <PlatformPressable
+        style={styles.settingRowPressable}
+        onPress={handleOpenSelector}
+        accessibilityRole="button"
+        accessibilityLabel="Notify me for"
+        accessibilityHint={`Currently set to ${notificationLevelDescription}. Tap to change.`}
+      >
+        <View style={styles.settingRowInner}>
+          <View style={styles.settingRowText}>
+            <Text>Notify me for</Text>
+            {Boolean(notificationLevelDescription) && (
+              <Text variant="tertiary">{notificationLevelDescription}</Text>
+            )}
+          </View>
+          {Platform.OS === 'ios' && (
+            <Icon
+              name="general.rightChevron"
+              size={16}
+              style={styles.chevron}
+              accessibilityElementsHidden
+            />
+          )}
+        </View>
+      </PlatformPressable>
     </View>
   )
 }
@@ -66,7 +92,7 @@ const useStyles = () => {
     },
     sectionInner: {
       paddingRight: 16,
-      paddingTop: 16,
+      paddingTop: 24,
       paddingBottom: 12,
       borderBottomWidth: 1,
       borderBottomColor: colors.borderColorDefaultBase,
@@ -80,13 +106,22 @@ const useStyles = () => {
     groupNameBold: {
       fontWeight: platformFontWeightBold,
     },
-    settingRow: {
+    settingRowPressable: {
+      paddingLeft: 16,
+    },
+    settingRowInner: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      paddingRight: 16,
       paddingVertical: 12,
-      backgroundColor: colors.surfaceColor100,
+    },
+    settingRowText: {
+      flex: 1,
+      gap: 2,
+    },
+    chevron: {
+      color: colors.iconColorDefaultDisabled,
     },
   })
 }

package/src/screens/message_actions_screen.tsx

@@ -78,7 +78,6 @@ function MessageActionsScreenContent({
   const apiClient = useApiClient()
   const styles = useStyles()
   const { featureEnabled } = useFeatures()
-  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
   const expandedLink = message.attachments.find(attachment => attachment.type === 'ExpandedLink')
   const hasExpandedLink = !!expandedLink
 
@@ -242,7 +241,7 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
-        {repliesEnabled && !inReplyScreen && (
+        {!inReplyScreen && (
           <FormSheet.Action
             onPress={handleReplyPress}
             title="Reply to message"

package/src/screens/notification_settings/hooks/groups.ts

@@ -1,9 +1,11 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
+import { merge } from 'lodash'
 import { getRequestQueryKey, useApiClient } from '../../../hooks'
 import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
-import { ApiResource } from '../../../types'
+import { ApiCollection, ApiResource } from '../../../types'
 import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
 import { throwResponseError } from '../../../utils/response_error'
+import { updateRecordInPagesData } from '../../../utils'
 
 export const getGroupsRequestArgs = () => ({
   url: '/me/groups',
@@ -13,7 +15,11 @@ export const getGroupsRequestArgs = () => ({
     filter: 'user_settable_notification_level',
     fields: {
       Group: [],
-      GroupMembership: ['notification_level', 'notification_level_description'],
+      GroupMembership: [
+        'notification_level',
+        'notification_level_description',
+        'notification_level_options',
+      ],
     },
     order: 'name',
   },
@@ -25,7 +31,11 @@ export const getGroupRequestArgs = ({ groupId }: { groupId: number | string }) =
     include: ['my_group_membership'],
     fields: {
       Group: ['name', 'source_app_name', 'source_type', 'my_group_membership'],
-      GroupMembership: ['notification_level', 'notification_level_description'],
+      GroupMembership: [
+        'notification_level',
+        'notification_level_description',
+        'notification_level_options',
+      ],
     },
   },
 })
@@ -39,50 +49,77 @@ export const useGroups = () => {
 export const useGroup = ({ groupId }: { groupId: number | string }) => {
   const args = getGroupRequestArgs({ groupId })
 
-  return useSuspenseGet<GroupResourceWithMembership>(args)
+  return useSuspenseGet<GroupResourceWithMembership>(args, { refetchOnMount: false })
 }
 
+type GroupsQueryData = InfiniteData<ApiCollection<GroupResourceWithMembership>>
+
 export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const requestArgs = getGroupRequestArgs({ groupId })
-  const queryKey = getRequestQueryKey(requestArgs)
+  const groupRequestArgs = getGroupRequestArgs({ groupId })
+  const groupsRequestArgs = getGroupsRequestArgs()
+  const groupQueryKey = getRequestQueryKey(groupRequestArgs)
 
-  return useMutation({
-    throwOnError: true,
-    onMutate: notificationLevel => {
-      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
-        if (!groupData?.data.myGroupMembership) return groupData
+  const enrichGroupMembership = (
+    membership: Partial<GroupMembership>
+  ): Partial<GroupMembership> => {
+    const cachedGroup =
+      queryClient.getQueryData<ApiResource<GroupResourceWithMembership>>(groupQueryKey)
+    const currentOptions = cachedGroup?.data.myGroupMembership?.notificationLevelOptions ?? []
+    const { notificationLevel } = membership
+    const selectedOption = notificationLevel
+      ? currentOptions.find(o => o.value === notificationLevel)
+      : undefined
+    const notificationLevelDescription =
+      membership.notificationLevelDescription ?? selectedOption?.description
 
-        return {
-          ...groupData,
-          data: {
-            ...groupData.data,
-            myGroupMembership: {
-              ...groupData.data.myGroupMembership,
-              notificationLevel,
-            },
-          },
-        }
+    return {
+      ...membership,
+      notificationLevelDescription,
+      ...(notificationLevel && {
+        notificationLevelOptions: currentOptions.map(o => ({
+          ...o,
+          enabled: o.value === notificationLevel,
+        })),
+      }),
+    }
+  }
+
+  const updateGroupsMembershipCache = (membership: Partial<GroupMembership>) => {
+    queryClient.setQueryData<GroupsQueryData>(getRequestQueryKey(groupsRequestArgs), prev =>
+      updateRecordInPagesData({
+        data: prev,
+        record: { id: groupId } as GroupResourceWithMembership,
+        processRecord: (_record, current) => merge({}, current, { myGroupMembership: membership }),
       })
+    )
+  }
+
+  const updateGroupMembershipCache = (membership: Partial<GroupMembership>) => {
+    queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(groupQueryKey, groupData => {
+      if (!groupData?.data.myGroupMembership) return groupData
+      return merge({}, groupData, { data: { myGroupMembership: membership } })
+    })
+  }
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: membership => {
+      const enriched = enrichGroupMembership(membership)
+      updateGroupsMembershipCache(enriched)
+      updateGroupMembershipCache(enriched)
     },
     onSuccess: response => {
-      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
-        if (!groupData?.data.myGroupMembership) return groupData
+      const enriched = enrichGroupMembership(response.data)
+      updateGroupsMembershipCache(enriched)
+      updateGroupMembershipCache(enriched)
 
-        return {
-          ...groupData,
-          data: {
-            ...groupData.data,
-            myGroupMembership: {
-              ...groupData.data.myGroupMembership,
-              ...response.data,
-            },
-          },
-        }
-      })
+      // Updating conversations without access to the current filters
+      // is a hard itch to scratch so we just need to refetch.
+      queryClient.invalidateQueries({ queryKey: ['/me/conversations'] })
     },
-    mutationFn: (notificationLevel: string) => {
+    mutationFn: (membership: Partial<GroupMembership>) => {
       return apiClient.chat
         .patch<ApiResource<GroupMembership>>({
           url: `/me/groups/${groupId}/my_group_membership`,
@@ -90,7 +127,9 @@ export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string
             data: {
               type: 'GroupMembership',
               attributes: {
-                notification_level: notificationLevel,
+                ...(membership.notificationLevel !== undefined && {
+                  notification_level: membership.notificationLevel,
+                }),
               },
             },
           },

package/src/screens/notification_settings_screen.tsx

@@ -1,27 +1,19 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useCallback, useEffect, type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { Badge, Heading, Icon, Text } from '../components'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { isDefined } from '../types'
-import type { GroupNotificationSettingsScreenProps } from './group_notification_settings_screen'
 import { useGroups } from './notification_settings/hooks/groups'
 import { useChatTypes } from './preferred_app/hooks/use_chat_types'
-import type { PreferredAppSelectionScreenProps } from './preferred_app_selection_screen'
 
 // =========================================
 // ====== Factory Constants & Types ========
 // =========================================
 
-type NotificationSettingsStackParamList = {
-  NotificationSettings: {}
-  PreferredAppSelection: PreferredAppSelectionScreenProps['route']['params']
-  GroupNotificationSettings: GroupNotificationSettingsScreenProps['route']['params']
-}
-
 enum SectionTypes {
   header,
   hidden,
@@ -53,7 +45,7 @@ interface DataItem<T, TName extends SectionTypes> {
 export type NotificationSettingsScreenProps = StaticScreenProps<{}>
 
 export function NotificationSettingsScreen({}: NotificationSettingsScreenProps) {
-  const navigation = useNavigation<NativeStackNavigationProp<NotificationSettingsStackParamList>>()
+  const navigation = useNavigation()
   const styles = useStyles()
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
@@ -109,14 +101,14 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       showBottomBorder: true,
     })),
     {
-      type: SectionTypes.header,
+      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.header,
       data: {
         title: 'Manage chat settings',
       },
       sectionInnerStyle: styles.sectionInnerHeader,
     },
     {
-      type: SectionTypes.view,
+      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.view,
       data: {
         children: (
           <Text variant="tertiary" style={styles.sectionDescription}>
@@ -130,6 +122,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       type: SectionTypes.link,
       data: {
         title: group.name,
+        subtitle: group.myGroupMembership?.notificationLevelDescription,
         rightLabel: group.sourceType,
         onPress: () =>
           navigation.navigate('GroupNotificationSettings', {
@@ -206,6 +199,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
                   <LinkRow {...item.data} />
                 </ListSection>
               )
+            case SectionTypes.hidden:
             default:
               return null
           }
@@ -268,11 +262,12 @@ function SettingRow({ title, style, rightLabel, rightItem, rightItemStyle = {} }
 
 interface LinkRowProps {
   title: string
+  subtitle?: string
   rightLabel: string
   onPress: () => void
 }
 
-function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
+function LinkRow({ title, subtitle, rightLabel, onPress }: LinkRowProps) {
   const styles = useLinkRowStyles()
   const isSourceType = rightLabel === 'Team' || rightLabel === 'Group' || rightLabel === 'PlanTeam'
 
@@ -285,9 +280,12 @@ function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
       accessibilityHint={`Navigate to ${title} settings`}
     >
       <View style={styles.innerContainer}>
-        <Text style={styles.title} numberOfLines={2}>
-          {title}
-        </Text>
+        <View style={styles.leftContent}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+        </View>
         <View style={styles.rightContent}>
           {isSourceType ? (
             <Badge label={rightLabel} appearance="neutral" variant="meta" />
@@ -311,13 +309,16 @@ function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
 
 const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
   const headerBottomPadding = 0
 
   return StyleSheet.create({
     listContainer: {
       flex: 1,
     },
-    contentContainer: {},
+    contentContainer: {
+      paddingBottom: bottom,
+    },
     sectionOuterBase: {
       paddingLeft: 16,
     },
@@ -326,6 +327,7 @@ const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
       paddingVertical: 16,
     },
     sectionInnerHeader: {
+      paddingTop: 24,
       paddingBottom: headerBottomPadding,
     },
     sectionInnerBottomBorder: {
@@ -364,15 +366,16 @@ const useLinkRowStyles = () => {
       justifyContent: 'space-between',
       gap: 12,
     },
+    leftContent: {
+      flex: 1,
+      gap: 4,
+    },
     rightContent: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8,
     },
-    title: {
-      flexShrink: 1,
-      alignSelf: 'center',
-    },
+    title: {},
     rightLabelText: {
       color: theme.colors.textColorDefaultSecondary,
     },

package/src/types/resources/conversation.ts

@@ -1,5 +1,6 @@
 import type { AnalyticsMetadataResource } from './analytics_metadata'
 import { ConversationBadgeResource } from './conversation_badge'
+import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 
@@ -8,9 +9,7 @@ export interface ConversationResource {
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
-  conversationMembership?: {
-    lastReadMessageSortKey: string
-  }
+  conversationMembership?: Partial<ConversationMembershipResource>
   createdAt: string
   deleted?: boolean
   groups?: GroupResource[]

package/src/types/resources/conversation_membership.ts

@@ -0,0 +1,17 @@
+import { ResourceObject } from '../api_primitives'
+
+export type NotificationLevelValue = 'everything' | 'nothing'
+export type NotificationLevelDescription = string
+
+export interface ConversationMembershipResource extends ResourceObject {
+  type: 'ConversationMembership'
+  lastReadMessageSortKey: string
+  muted: boolean
+  notificationLevel: NotificationLevelValue
+  notificationLevelDescription: NotificationLevelDescription
+  notificationLevelOptions: Array<{
+    description: NotificationLevelDescription
+    enabled: boolean
+    value: NotificationLevelValue
+  }>
+}