@planningcenter/chat-react-native 3.11.0-rc.8 → 3.11.0

package/src/contexts/api_provider.tsx

@@ -1,9 +1,16 @@
-import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
+import {
+  focusManager,
+  QueryClient,
+  QueryClientProvider,
+  QueryKey,
+  usePrefetchQuery,
+} from '@tanstack/react-query'
 import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
 import { ChatContext, ChatContextValue } from './chat_context'
-import { RequestQueryKey } from '../hooks'
+import { appGrantsRequestArgs, getRequestQueryKey, RequestQueryKey } from '../hooks'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
+import { useAppState } from '../hooks/use_app_state'
 
 let apiClient: ApiClient | undefined
 
@@ -38,7 +45,34 @@ export function ApiProvider({ children }: ViewProps) {
     chatQueryClient.clear()
   }, [sessionChanged])
 
-  return <QueryClientProvider client={chatQueryClient}>{children}</QueryClientProvider>
+  return (
+    <QueryClientProvider client={chatQueryClient}>
+      <PrefetchQueries />
+      {children}
+    </QueryClientProvider>
+  )
+}
+
+// Component to prefetch queries when the app is focused
+// This needs to live in the provider so that it can access the api client
+// and the chat query client
+const PrefetchQueries = () => {
+  usePrefetchQuery({
+    queryKey: getRequestQueryKey(appGrantsRequestArgs),
+    queryFn: defaultQueryFn,
+  })
+
+  return null
+}
+
+export function useFocusManager() {
+  const appState = useAppState()
+
+  useEffect(() => {
+    focusManager.setFocused(appState === 'active')
+  }, [appState])
+
+  return appState
 }
 
 function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): boolean {

package/src/hooks/groups/use_groups_conversation_create.ts

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query'
 import { ApiResource, ConversationResource, ResourceObject } from '../../types'
 import { useApiClient } from '../use_api_client'
+import { throwResponseError } from '../../utils/response_error'
 
 interface Props {
   groupId: number
@@ -41,7 +42,8 @@ export function useGroupsConversationCreate({ groupId, title, onSuccess }: Props
               },
             },
           })
-        ),
+        )
+        .catch(throwResponseError),
   })
 }
 

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -7,6 +7,7 @@ import {
   ServicesChatPayloadResource,
 } from '../../types'
 import { ApiClient, useApiClient } from '../use_api_client'
+import { throwResponseError } from '../../utils/response_error'
 
 interface Props {
   teamIds: number[]
@@ -15,34 +16,41 @@ interface Props {
 }
 
 export function useFindOrCreateServicesConversation({ teamIds, planId, onSuccess }: Props) {
-  const teamAndPlanParams: TeamAndPlanParams = {
-    team_id: teamIds.join(','),
-    ...(planId ? { plan_id: planId } : {}),
-  }
-
   const apiClient = useApiClient()
   return useMutation({
     throwOnError: true,
     onSuccess: result => {
       onSuccess && onSuccess(result)
     },
-    mutationFn: async () => {
-      const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
-        .then(res => res.data.groupIdentifiers)
-        .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
-        .catch(() => null)
-      const foundConversation = foundConversations?.data[0]
+    mutationFn: async () => findOrCreateServicesConversation(apiClient, teamIds, planId),
+  })
+}
 
-      if (foundConversation?.id) {
-        return foundConversation
-      }
+export const findOrCreateServicesConversation = async (
+  apiClient: ApiClient,
+  teamIds: number[],
+  planId?: number
+) => {
+  const teamAndPlanParams: TeamAndPlanParams = {
+    team_id: teamIds.join(','),
+    ...(planId ? { plan_id: planId } : {}),
+  }
 
-      return fetchServicesPayload(apiClient, teamAndPlanParams)
-        .then(res => res.data.payload)
-        .then(payload => createConversation(apiClient, payload))
-        .then(res => res.data)
-    },
-  })
+  const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
+    .then(res => res.data.groupIdentifiers)
+    .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
+    .catch(() => null)
+  const foundConversation = foundConversations?.data[0]
+
+  if (foundConversation?.id) {
+    return foundConversation
+  }
+
+  return fetchServicesPayload(apiClient, teamAndPlanParams)
+    .then(res => res.data.payload)
+    .then(payload => createConversation(apiClient, payload))
+    .then(res => res.data)
+    .catch(throwResponseError)
 }
 
 interface TeamAndPlanParams {
@@ -79,7 +87,7 @@ function findConversationWithExactTeams(apiClient: ApiClient, groupIdentifiers:
     url: '/me/conversations',
     data: {
       fields: {
-        Conversation: ['stream_channel'],
+        Conversation: ['stream_channel', 'title'],
       },
       filter: 'with_exact_groups',
       gids: groupIdentifiers.join(','),

package/src/hooks/{use_services_team.ts → services/use_services_team.ts}

@@ -1,5 +1,5 @@
-import { TeamOptionResource, TeamOptionResponseItem } from '../types'
-import { useApiGet } from './use_api'
+import { TeamOptionResource, TeamOptionResponseItem } from '../../types'
+import { useApiGet } from '../use_api'
 
 export const useServicesTeams = () => {
   const { data: chat } = useApiGet<TeamOptionResource>({

package/src/hooks/use_attachment_uploader.ts

@@ -1,31 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { SUPPORTED_EXTENSIONS } from './attachments/supported_extensions'
-import { FileForUploadClient, useUploadClient } from './use_upload_client'
+import { useUploadClient } from './use_upload_client'
 import { useApiClient } from './use_api_client'
 import { ApiResource } from '../types'
+import {
+  FileAttachment,
+  FileUploadState,
+  NativeAttachmentFile,
+} from '../types/resources/denormalized_attachment_resource_for_create'
 
-type AttachmentStatus = 'uploading' | 'success' | 'error'
-
-interface AttachmentFile extends FileForUploadClient {
-  size: number
-  width?: number
-  height?: number
-}
-
-export interface FileAttachment {
-  id?: string
-  file: AttachmentFile
-  status: AttachmentStatus
-}
-
-interface UploadState {
-  [fileName: string]: {
-    status: AttachmentStatus
-    id?: string
-  }
-}
-
-interface FileError {
+export interface FileError {
   file_type?: string[]
   file_size?: boolean
 }
@@ -38,13 +22,13 @@ export function useAttachmentUploader({ conversationId }: { conversationId: numb
   const apiClient = useApiClient()
   const uploadApi = useUploadClient()
   const [attachments, setAttachments] = useState<FileAttachment[]>([])
-  const uploadState = useRef<UploadState>({})
+  const uploadState = useRef<FileUploadState>({})
   const [lastUploadId, setLastUploadId] = useState<string>()
   const numberOfAttachments = attachments.length
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const handleFilesAttached = useCallback(
-    (files: AttachmentFile[]) => {
+    (files: NativeAttachmentFile[]) => {
       const fileErrors = {} as FileError
 
       const validFiles = files.filter(file => {

package/src/hooks/use_chat_permissions.ts

@@ -1,16 +1,19 @@
 import { AppGrantsResource } from '../types'
 import { useApiGet } from './use_api'
+import { App } from './use_api_client'
 
-export function useAppGrants() {
-  return useApiGet<AppGrantsResource[]>({
-    url: '/me/app_grants',
-    data: {
-      fields: {
-        AppGrant: ['create_conversations', 'app_name'],
-      },
+export const appGrantsRequestArgs = {
+  url: '/me/app_grants',
+  data: {
+    fields: {
+      AppGrant: ['create_conversations', 'app_name'],
     },
-    app: 'chat',
-  })
+  },
+  app: 'chat' as App,
+}
+
+export function useAppGrants() {
+  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs)
 }
 
 export function useCanCreateConversations(): boolean {

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -14,6 +14,7 @@ import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../utils/request/messages'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
+import { isTemporaryMessageId } from './use_message_create_or_update'
 
 interface Props {
   conversationId: number
@@ -42,8 +43,25 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
 
     queryClient.setQueryData<QueryData>(messagesQueryKey, prev => {
       if (e.event === 'message.created') {
+        // Before adding the new message, remove any pending temporary messages
+        // with matching text to prevent duplicates from race conditions
+        let dataAfterTempRemoval = prev
+        if (prev && message.text && message.mine) {
+          dataAfterTempRemoval = deleteRecordInPagesData({
+            data: prev,
+            record: message,
+            matchFn: (existingMessage, _record) => {
+              return (
+                isTemporaryMessageId(existingMessage.id) &&
+                existingMessage.text === message.text &&
+                existingMessage.mine
+              )
+            },
+          })
+        }
+
         return updateOrCreateRecordInPagesData({
-          data: prev,
+          data: dataAfterTempRemoval,
           record: message,
           processRecord: (record, current) => {
             return { ...current, ...record }

package/src/hooks/use_giphy.ts

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
-import { DenormalizedGiphyAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+import { DenormalizedGiphyAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource_for_create'
 import { ChatContext } from '../contexts/chat_context'
 
 interface GiphyGif {

package/src/hooks/use_message_create_or_update.ts

@@ -3,17 +3,27 @@ import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_
 import { useApiClient } from './use_api_client'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { chatQueryClient } from '../contexts/api_provider'
-import { updateOrCreateRecordInPagesData } from '../utils'
-import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+import {
+  deleteRecordInPagesData,
+  updateOrCreateRecordInPagesData,
+  updateRecordInPagesData,
+} from '../utils'
+import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource_for_create'
+import { useCurrentPerson } from './use_current_person'
+import { optimisticallyUpdateMessage } from '../utils/cache/optimistically_update_message'
+import { optimisticallyCreateMessage } from '../utils/cache/optimistically_create_message'
 
 interface Props {
   conversationId: number
-  messageId?: string | number | null
+  message?: MessageResource
 }
 
-export function useMessageCreateOrUpdate({ conversationId, messageId }: Props) {
-  const isEditing = !!messageId
+export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
+  const messageId = message?.id || null
+  const isEditing = !isNewMessage(message)
   const apiClient = useApiClient()
+  const currentPerson = useCurrentPerson()
+
   const mutation = useMutation({
     mutationFn: ({
       text,
@@ -47,11 +57,70 @@ export function useMessageCreateOrUpdate({ conversationId, messageId }: Props) {
         })
       }
     },
-    onSuccess: (result: ApiResource<MessageResource>) => {
+    onMutate: async ({
+      text,
+      attachments,
+    }: {
+      text: string
+      attachments?: DenormalizedAttachmentResourceForCreate[]
+    }) => {
+      if (message && isEditing) {
+        const optimisticMessage = optimisticallyUpdateMessage({
+          conversationId,
+          message,
+          text,
+        })
+
+        return { message: optimisticMessage }
+      }
+
+      const optimisticMessage = optimisticallyCreateMessage({
+        conversationId,
+        message,
+        text,
+        attachments,
+        currentPerson,
+      })
+
+      return { message: optimisticMessage }
+    },
+    onError: (error, variables, context) => {
+      const { message: optimisticMessage } = context || {}
+      // Add error to the optimistic message from the cache on error
+      if (optimisticMessage) {
+        const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+        chatQueryClient.setQueryData(
+          queryKey,
+          (data: InfiniteData<ApiCollection<MessageResource>> | undefined) =>
+            updateRecordInPagesData({
+              data,
+              record: optimisticMessage,
+              processRecord: (_next, prev) => ({
+                ...prev,
+                error: error.message || 'Failed to send message',
+                pending: false, // Mark as no longer pending
+              }),
+            })
+        )
+      }
+    },
+    onSuccess: (result: ApiResource<MessageResource>, variables, context) => {
+      const { message: optimisticMessage } = context || {}
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
       const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
 
+      // First remove the optimistic message if it exists
+      if (optimisticMessage) {
+        chatQueryClient.setQueryData<QueryData>(queryKey, data =>
+          deleteRecordInPagesData({
+            data,
+            record: optimisticMessage,
+          })
+        )
+      }
+
+      // Then add the real message
       chatQueryClient.setQueryData<QueryData>(queryKey, data =>
         updateOrCreateRecordInPagesData({
           data,
@@ -63,3 +132,10 @@ export function useMessageCreateOrUpdate({ conversationId, messageId }: Props) {
 
   return mutation
 }
+
+export function isTemporaryMessageId(messageId?: string | null): boolean {
+  return !!messageId && messageId.endsWith('-temp')
+}
+export function isNewMessage(message?: MessageResource): boolean {
+  return !message?.id || isTemporaryMessageId(message.id)
+}

package/src/index.tsx

@@ -1,5 +1,5 @@
 export { GroupConversations } from './components'
-export { ApiProvider, chatQueryClient } from './contexts/api_provider'
+export { ApiProvider, chatQueryClient, useFocusManager } from './contexts/api_provider'
 export * from './contexts/chat_context'
 export * from './navigation'
 export { ScreenLayout } from './navigation/screenLayout'

package/src/navigation/index.tsx

@@ -43,6 +43,8 @@ import {
 } from '../screens/conversation/message_read_receipts_screen'
 import { Platform } from 'react-native'
 import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { TeamConversationScreen } from '../screens/team_conversation_screen'
+import { CardStyleInterpolators } from '@react-navigation/stack'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -179,6 +181,14 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    TeamConversation: {
+      screen: TeamConversationScreen,
+      options: {
+        title: 'Finding conversation...',
+        animation: 'none',
+        cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
+      },
+    },
     ConversationDetails: {
       screen: ConversationDetailsScreen,
       options: ({ navigation }) => ({

package/src/screens/conversation_details_screen.tsx

@@ -242,7 +242,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
-        title: 'Freeze converation',
+        title: 'Freeze conversation',
         subtitle: 'Disables replies for everyone except leaders.',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -1,10 +1,10 @@
-import { StackActions, useNavigation } from '@react-navigation/native'
+import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
-import React, { useCallback } from 'react'
-import { Platform, StyleSheet } from 'react-native'
-import { FlatList } from 'react-native-gesture-handler'
+import React, { useCallback, useMemo, useState } from 'react'
+import { LayoutChangeEvent, Platform, StyleSheet, View } from 'react-native'
+import { FlatList, TextInput } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Heading } from '../../components'
+import { BlankState, Heading, ToggleButton } from '../../components'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
 import { useTheme } from '../../hooks'
 import { tokens } from '../../vendor/tapestry/tokens'
@@ -12,7 +12,8 @@ import { CheckboxRow } from './components/checkbox_row'
 import { HeaderRow } from './components/header_row'
 import { useFlattenedArrayOfServiceTypesWithTeams } from './hooks/use_flattened_array_of_service_types_with_teams'
 import { useServiceTypesWithTeams } from './hooks/use_service_types_with_teams'
-import { ConversationFilterRecipientsScreenProps, SectionTypes } from './types'
+import { ConversationFilterRecipientsScreenProps, SectionTypes, TeamFilterTypes } from './types'
+import { DefaultLoading } from '../../components/page/loading'
 
 const SERVICE_TYPE_LABELLED_BY_PREFIX = 'header-'
 
@@ -28,18 +29,34 @@ export const ConversationFilterRecipientsScreen = ({
   route,
 }: ConversationFilterRecipientsScreenProps) => {
   const styles = useStyles()
+
+  // Set the height of the container to accommodate the team filters
+  const [teamFiltersHeight, setTeamFiltersHeight] = useState(200)
+  const { top, bottom } = useSafeAreaInsets()
+  const listContainerStyle = useMemo(
+    () => Platform.select({ ios: { paddingBottom: teamFiltersHeight + bottom + top } }),
+    [teamFiltersHeight, bottom, top]
+  )
+
   const navigation =
     useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()
   const { team_ids: teamIds } = route.params
+  const { params } = route
+  const teamIdCount = Number(teamIds?.length)
+  const headerTitle = useMemo(() => {
+    return teamIdCount >= 1 ? `Selected teams (${teamIdCount})` : 'Select teams'
+  }, [teamIdCount])
 
-  const { serviceTypes } = useServiceTypesWithTeams()
+  const { serviceTypes, isFetched } = useServiceTypesWithTeams({
+    filterType: params.team_filter_type,
+    searchQuery: params.search_query,
+  })
   const data = useFlattenedArrayOfServiceTypesWithTeams({
     data: serviceTypes,
     firstRowStyle: styles.firstRow,
     lastRowStyle: styles.lastRow,
   })
 
-  const { params } = route
   const noTeamsSelected = params.team_ids?.length === 0 || !params.team_ids
   const applyButtonAccessibilityHint = noTeamsSelected
     ? 'Select at least one team to navigate to the final step in creating your conversation.'
@@ -47,9 +64,7 @@ export const ConversationFilterRecipientsScreen = ({
 
   const setTeamFilters = useCallback(
     ({ team_ids }: { team_ids: number[] }) => {
-      navigation.setParams({
-        team_ids,
-      })
+      navigation.setParams({ team_ids })
     },
     [navigation]
   )
@@ -62,13 +77,14 @@ export const ConversationFilterRecipientsScreen = ({
     navigation.dispatch(StackActions.popTo('ConversationNew', params))
   }, [navigation, params])
 
-  const teamIdCount = Number(teamIds?.length)
-  const count = teamIdCount > 1 ? ` (${teamIdCount})` : ''
+  const handleTeamFiltersLayout = useCallback((event: LayoutChangeEvent) => {
+    setTeamFiltersHeight(event.nativeEvent.layout.height)
+  }, [])
 
   return (
     <FormSheet.Root style={styles.root}>
-      <FormSheet.Header>
-        <FormSheet.HeaderTitle>Teams I lead{count}</FormSheet.HeaderTitle>
+      <FormSheet.Header style={styles.header}>
+        <FormSheet.HeaderTitle>{headerTitle}</FormSheet.HeaderTitle>
         <FormSheet.HeaderActions>
           <FormSheet.HeaderSecondaryButton
             onPress={resetTeamFilters}
@@ -84,7 +100,7 @@ export const ConversationFilterRecipientsScreen = ({
           />
         </FormSheet.HeaderActions>
       </FormSheet.Header>
-
+      <TeamFilters onLayout={handleTeamFiltersLayout} />
       <FlatList
         data={data}
         ListHeaderComponent={
@@ -92,10 +108,11 @@ export const ConversationFilterRecipientsScreen = ({
             Service Types
           </Heading>
         }
-        contentContainerStyle={styles.listContentContainer}
+        contentContainerStyle={[styles.listContentContainer, listContainerStyle]}
         keyExtractor={item =>
           `${item.type === SectionTypes.header ? item.data.serviceTypeId : item.data.teamId}`
         }
+        ListEmptyComponent={isFetched ? <BlankState title="No teams found" /> : <DefaultLoading />}
         renderItem={({ item }) => {
           switch (item.type) {
             case SectionTypes.header:
@@ -125,6 +142,63 @@ export const ConversationFilterRecipientsScreen = ({
   )
 }
 
+const TeamFilters = ({ onLayout }: { onLayout?: (event: LayoutChangeEvent) => void }) => {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()
+  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
+  const { params } = route
+
+  const active = params.team_filter_type || TeamFilterTypes.TeamsIlead
+
+  const handleFilterChange = useCallback(
+    (filter: TeamFilterTypes) => {
+      navigation.setParams({
+        team_filter_type: filter,
+        team_ids: [],
+      })
+    },
+    [navigation]
+  )
+
+  return (
+    <View style={styles.teamFiltersContainer} onLayout={onLayout}>
+      <TextInput
+        defaultValue={params.search_query}
+        placeholder="Search teams"
+        placeholderTextColor={colors.textColorDefaultPlaceholder}
+        style={styles.searchInput}
+        onChangeText={text => {
+          navigation.setParams({
+            search_query: text,
+          })
+        }}
+      />
+      <View style={styles.filterToggleContainer}>
+        <ToggleButton
+          active={active === TeamFilterTypes.TeamsIlead}
+          title={TeamFilterTypes.TeamsIlead}
+          accessibilityLabel="Show all teams I lead"
+          onPress={() => handleFilterChange(TeamFilterTypes.TeamsIlead)}
+        />
+        <ToggleButton
+          active={active === TeamFilterTypes.MyTeams}
+          title={TeamFilterTypes.MyTeams}
+          accessibilityLabel="Show all my teams"
+          onPress={() => handleFilterChange(TeamFilterTypes.MyTeams)}
+        />
+        <ToggleButton
+          active={active === TeamFilterTypes.All}
+          title={TeamFilterTypes.All}
+          accessibilityLabel="Show all teams"
+          onPress={() => handleFilterChange(TeamFilterTypes.All)}
+        />
+      </View>
+    </View>
+  )
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
   const { bottom } = useSafeAreaInsets()
@@ -133,6 +207,9 @@ const useStyles = () => {
     root: {
       backgroundColor: colors.surfaceColor080,
     },
+    header: {
+      borderBottomWidth: 0,
+    },
     listContentContainer: {
       padding: 16,
       paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
@@ -149,5 +226,29 @@ const useStyles = () => {
       borderBottomEndRadius: tokens.borderRadiusLg,
       marginBottom: 16,
     },
+    teamFiltersContainer: {
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingBottom: 28,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    filterToggleContainer: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    searchInput: {
+      paddingVertical: 16,
+      paddingHorizontal: 16,
+      color: colors.textColorDefaultPrimary,
+      textAlignVertical: 'center',
+      justifyContent: 'center',
+      fontSize: 16,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 24,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
   })
 }