add announcement nux

src/components/contacts/FindContactsBannerNUX.tsx

@@ -50,7 +50,7 @@ export function FindContactsBannerNUX() {
             ]}>
             <Image
               source={require('../../../assets/images/find_friends_illustration_small.webp')}
-              accessibilityIgnoresInvertColors={false}
+              accessibilityIgnoresInvertColors
               style={[
                 {height: 70, aspectRatio: 573 / 286},
                 a.self_end,

src/components/dialogs/nuxs/FindContactsAnnouncement.tsx

@@ -0,0 +1,114 @@
+import {useCallback} from 'react'
+import {View} from 'react-native'
+import {Image} from 'expo-image'
+import {LinearGradient} from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isWeb} from '#/platform/detection'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useNuxDialogContext} from '#/components/dialogs/nuxs'
+import {Text} from '#/components/Typography'
+import {navigate} from '#/Navigation'
+
+export function FindContactsAnnouncement() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const nuxDialogs = useNuxDialogContext()
+  const control = Dialog.useDialogControl()
+
+  Dialog.useAutoOpen(control)
+
+  const onClose = useCallback(() => {
+    nuxDialogs.dismissActiveNux()
+  }, [nuxDialogs])
+
+  return (
+    <Dialog.Outer
+      control={control}
+      onClose={onClose}
+      nativeOptions={{preventExpansion: true}}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Introducing finding friends via contacts`)}
+        style={[web({maxWidth: 440})]}
+        contentContainerStyle={[
+          {
+            paddingTop: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
+        ]}>
+        <View style={[a.align_center, a.pt_3xl]}>
+          <LinearGradient
+            colors={[t.palette.primary_200, t.atoms.bg.backgroundColor]}
+            locations={[0, 1]}
+            start={{x: 0, y: 0}}
+            end={{x: 0, y: 1}}
+            style={[a.absolute, a.inset_0]}
+          />
+          <View style={[a.w_full, a.pt_sm, a.px_5xl, a.pb_4xl]}>
+            <Image
+              accessibilityIgnoresInvertColors
+              source={require('../../../../assets/images/find_friends_illustration.webp')}
+              style={[a.w_full, {aspectRatio: 1278 / 661}]}
+              alt={_(
+                msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
+              )}
+            />
+          </View>
+        </View>
+        <View style={[a.align_center, a.px_xl, a.gap_5xl]}>
+          <View style={[a.gap_sm, a.align_center]}>
+            <Text
+              style={[
+                a.text_4xl,
+                a.leading_tight,
+                a.font_bold,
+                a.text_center,
+                {
+                  fontSize: isWeb ? 28 : 32,
+                  maxWidth: 300,
+                },
+              ]}>
+              <Trans>Find your friends</Trans>
+            </Text>
+            <Text
+              style={[
+                a.text_md,
+                t.atoms.text_contrast_medium,
+                a.leading_snug,
+                a.text_center,
+                {maxWidth: 340},
+              ]}>
+              <Trans>
+                Bluesky is more fun with friends! Import your contacts to see
+                who’s already here.
+              </Trans>
+            </Text>
+          </View>
+
+          <Button
+            label={_(msg`Import Contacts`)}
+            size="large"
+            color="primary"
+            onPress={() => {
+              control.close(() => {
+                navigate('FindContactsFlow')
+              })
+            }}
+            style={[a.w_full]}>
+            <ButtonText>
+              <Trans>Import Contacts</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}

src/components/dialogs/nuxs/index.tsx

@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import {type AppBskyActorDefs} from '@atproto/api'
 
 import {useGate} from '#/lib/statsig/statsig'
@@ -12,11 +19,11 @@ import {
 import {useProfileQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
-import {BookmarksAnnouncement} from '#/components/dialogs/nuxs/BookmarksAnnouncement'
+import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
 /*
  * NUXs
  */
-import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
+import {FindContactsAnnouncement} from './FindContactsAnnouncement'
 import {isExistingUserAsOf} from './utils'
 
 type Context = {
@@ -34,24 +41,24 @@ const queuedNuxs: {
   }) => boolean
 }[] = [
   {
-    id: Nux.BookmarksAnnouncement,
+    id: Nux.FindContactsAnnouncement,
     enabled: ({currentProfile}) => {
       return isExistingUserAsOf(
-        '2025-09-08T00:00:00.000Z',
+        '2025-12-16T00:00:00.000Z',
         currentProfile.createdAt,
       )
     },
   },
 ]
 
-const Context = React.createContext<Context>({
+const Context = createContext<Context>({
   activeNux: undefined,
   dismissActiveNux: () => {},
 })
 Context.displayName = 'NuxDialogContext'
 
 export function useNuxDialogContext() {
-  return React.useContext(Context)
+  return useContext(Context)
 }
 
 export function NuxDialogs() {
@@ -92,19 +99,19 @@ function Inner({
 }) {
   const gate = useGate()
   const {nuxs} = useNuxs()
-  const [snoozed, setSnoozed] = React.useState(() => {
+  const [snoozed, setSnoozed] = useState(() => {
     return isSnoozed()
   })
-  const [activeNux, setActiveNux] = React.useState<Nux | undefined>()
+  const [activeNux, setActiveNux] = useState<Nux | undefined>()
   const {mutateAsync: saveNux} = useSaveNux()
   const {mutate: resetNuxs} = useResetNuxs()
 
-  const snoozeNuxDialog = React.useCallback(() => {
+  const snoozeNuxDialog = useCallback(() => {
     snooze()
     setSnoozed(true)
   }, [setSnoozed])
 
-  const dismissActiveNux = React.useCallback(() => {
+  const dismissActiveNux = useCallback(() => {
     if (!activeNux) return
     setActiveNux(undefined)
   }, [activeNux, setActiveNux])
@@ -118,7 +125,7 @@ function Inner({
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (snoozed) return // comment this out to test
     if (!nuxs) return
 
@@ -170,7 +177,7 @@ function Inner({
     preferences,
   ])
 
-  const ctx = React.useMemo(() => {
+  const ctx = useMemo(() => {
     return {
       activeNux,
       dismissActiveNux,
@@ -180,7 +187,9 @@ function Inner({
   return (
     <Context.Provider value={ctx}>
       {/*For example, activeNux === Nux.NeueTypography && <NeueTypography />*/}
-      {activeNux === Nux.BookmarksAnnouncement && <BookmarksAnnouncement />}
+      {activeNux === Nux.FindContactsAnnouncement && (
+        <FindContactsAnnouncement />
+      )}
     </Context.Provider>
   )
 }

src/state/queries/nuxs/definitions.ts

@@ -54,6 +54,10 @@ export type AppNux = BaseNux<
       id: Nux.BookmarksAnnouncement
       data: undefined
     }
+  | {
+      id: Nux.FindContactsAnnouncement
+      data: undefined
+    }
   | {
       id: Nux.FindContactsDismissibleBanner
       data: undefined