diff --git a/assets/images/find_friends_illustration_small.webp b/assets/images/find_friends_illustration_small.webp new file mode 100644 index 0000000000..af7cd083f2 Binary files /dev/null and b/assets/images/find_friends_illustration_small.webp differ diff --git a/package.json b/package.json index e0a06f6357..3a504dec43 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@atproto/api": "^0.18.4", "@bitdrift/react-native": "^0.6.8", "@braintree/sanitize-url": "^6.0.2", - "@bsky.app/alf": "^0.1.5", + "@bsky.app/alf": "^0.1.6", "@bsky.app/react-native-mmkv": "2.12.5", "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet", "@emoji-mart/react": "^1.1.1", diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 762223fc35..6e4256c1e9 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -38,7 +38,7 @@ export function Outer({ }: { children: React.ReactNode noBottomBorder?: boolean - headerRef?: React.MutableRefObject + headerRef?: React.RefObject sticky?: boolean }) { const t = useTheme() @@ -183,7 +183,7 @@ export function TitleText({ + + + + + + + Import contacts to find your friends + + + + + + + + ) +} +function useInternalState() { + const {nux} = useNux(Nux.FindContactsDismissibleBanner) + const {mutate: save, variables} = useSaveNux() + const hidden = !!variables + + const visible = useMemo(() => { + if (isWeb) return false + if (hidden) return false + if (nux && nux.completed) return false + return true + }, [hidden, nux]) + + const close = () => { + save({ + id: Nux.FindContactsDismissibleBanner, + completed: true, + data: undefined, + }) + } + + return {visible, close} +} diff --git a/src/state/queries/nuxs/definitions.ts b/src/state/queries/nuxs/definitions.ts index 1656494471..d349b4e959 100644 --- a/src/state/queries/nuxs/definitions.ts +++ b/src/state/queries/nuxs/definitions.ts @@ -10,6 +10,8 @@ export enum Nux { AgeAssuranceDismissibleNotice = 'AgeAssuranceDismissibleNotice', AgeAssuranceDismissibleFeedBanner = 'AgeAssuranceDismissibleFeedBanner', BookmarksAnnouncement = 'BookmarksAnnouncement', + FindContactsAnnouncement = 'FindContactsAnnouncement', + FindContactsDismissibleBanner = 'FindContactsDismissibleBanner', /* * Blocking announcements. New IDs are required for each new announcement. @@ -52,6 +54,10 @@ export type AppNux = BaseNux< id: Nux.BookmarksAnnouncement data: undefined } + | { + id: Nux.FindContactsDismissibleBanner + data: undefined + } > export const NuxSchemas: Record | undefined> = { @@ -63,4 +69,6 @@ export const NuxSchemas: Record | undefined> = { [Nux.AgeAssuranceDismissibleFeedBanner]: undefined, [Nux.PolicyUpdate202508]: undefined, [Nux.BookmarksAnnouncement]: undefined, + [Nux.FindContactsAnnouncement]: undefined, + [Nux.FindContactsDismissibleBanner]: undefined, } diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 243f3705b5..44d4aeaee8 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -12,6 +12,7 @@ import {isWeb} from '#/platform/detection' import {useProfileFollowsQuery} from '#/state/queries/profile-follows' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useSession} from '#/state/session' +import {FindContactsBannerNUX} from '#/components/contacts/FindContactsBannerNUX' import {PeopleRemove2_Stroke1_Corner0_Rounded as PeopleRemoveIcon} from '#/components/icons/PeopleRemove2' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' import {List} from '../util/List' @@ -208,6 +209,7 @@ export function ProfileFollows({name}: {name: string}) { onEndReached={onEndReached} onEndReachedThreshold={4} onItemSeen={onItemSeen} + ListHeaderComponent={} ListFooterComponent={