+26

src/analytics/metrics/types.ts

··· 649 tab: string 650 } 651 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 652 'progressGuide:hide': {} 653 'progressGuide:followDialog:open': {} 654

··· 649 tab: string 650 } 651 652 + 'search:query': { 653 + source: 'typed' | 'history' | 'autocomplete' 654 + } 655 + 656 + 'search:results:loaded': { 657 + tab: 'top' | 'latest' | 'people' | 'feeds' 658 + initialCount: number 659 + } 660 + 661 + 'search:result:press': { 662 + tab?: 'top' | 'latest' | 'people' | 'feeds' 663 + resultType: 'post' | 'profile' | 'feed' 664 + position: number 665 + uri: string 666 + } 667 + 668 + 'search:recent:press': { 669 + profileDid: string 670 + position: number 671 + } 672 + 673 + 'search:autocomplete:press': { 674 + profileDid: string 675 + position: number 676 + } 677 + 678 'progressGuide:hide': {} 679 'progressGuide:followDialog:open': {} 680

+23 -25

src/components/FeedCard.tsx

··· 1 - import React, {useMemo} from 'react' 2 import {type GestureResponderEvent, View} from 'react-native' 3 import { 4 type AppBskyFeedDefs, ··· 6 AtUri, 7 RichText as RichTextApi, 8 } from '@atproto/api' 9 - import {msg} from '@lingui/core/macro' 10 - import {useLingui} from '@lingui/react' 11 - import {Plural, Trans} from '@lingui/react/macro' 12 import {useQueryClient} from '@tanstack/react-query' 13 14 import {sanitizeHandle} from '#/lib/strings/handles' ··· 73 }: Props & Omit<LinkProps, 'to' | 'label'>) { 74 const queryClient = useQueryClient() 75 76 - const href = React.useMemo(() => { 77 return createProfileFeedHref({feed: view}) 78 }, [view]) 79 80 - React.useEffect(() => { 81 precacheFeedFromGeneratorView(queryClient, view) 82 }, [view, queryClient]) 83 ··· 212 description, 213 ...rest 214 }: {description?: string} & Partial<RichTextProps>) { 215 - const rt = React.useMemo(() => { 216 if (!description) return 217 const rt = new RichTextApi({text: description || ''}) 218 rt.detectFacetsWithoutResolution() ··· 279 pin?: boolean 280 text?: boolean 281 } & Partial<ButtonProps>) { 282 - const {_} = useLingui() 283 const {data: preferences} = usePreferencesQuery() 284 const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} = 285 useAddSavedFeedsMutation() ··· 289 const uri = view.uri 290 const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list' 291 292 - const savedFeedConfig = React.useMemo(() => { 293 return preferences?.savedFeeds?.find(feed => feed.value === uri) 294 }, [preferences?.savedFeeds, uri]) 295 const removePromptControl = Prompt.usePromptControl() 296 const isPending = isAddSavedFeedPending || isRemovePending 297 298 - const toggleSave = React.useCallback( 299 async (e: GestureResponderEvent) => { 300 e.preventDefault() 301 e.stopPropagation() ··· 312 }, 313 ]) 314 } 315 - Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'}))) 316 } catch (err: any) { 317 logger.error(err, {message: `FeedCard: failed to update feeds`, pin}) 318 - Toast.show(_(msg`Failed to update feeds`), 'xmark') 319 } 320 }, 321 - [_, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type], 322 ) 323 324 - const onPrompRemoveFeed = React.useCallback( 325 - async (e: GestureResponderEvent) => { 326 e.preventDefault() 327 e.stopPropagation() 328 ··· 335 <> 336 <Button 337 disabled={isPending} 338 - label={_(msg`Add this feed to your feeds`)} 339 size="small" 340 variant="solid" 341 color={savedFeedConfig ? 'secondary' : 'primary'} 342 - onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave} 0 0 343 {...buttonProps}> 344 {savedFeedConfig ? ( 345 <> ··· 350 )} 351 {text && ( 352 <ButtonText> 353 - <Trans>Unpin Feed</Trans> 354 </ButtonText> 355 )} 356 </> ··· 359 <ButtonIcon size="md" icon={isPending ? Loader : PinIcon} /> 360 {text && ( 361 <ButtonText> 362 - <Trans>Pin Feed</Trans> 363 </ButtonText> 364 )} 365 </> ··· 368 369 <Prompt.Basic 370 control={removePromptControl} 371 - title={_(msg`Remove from your feeds?`)} 372 - description={_( 373 - msg`Are you sure you want to remove this from your feeds?`, 374 - )} 375 - onConfirm={toggleSave} 376 - confirmButtonCta={_(msg`Remove`)} 377 confirmButtonColor="negative" 378 /> 379 </>

··· 1 + import {useCallback, useEffect, useMemo} from 'react' 2 import {type GestureResponderEvent, View} from 'react-native' 3 import { 4 type AppBskyFeedDefs, ··· 6 AtUri, 7 RichText as RichTextApi, 8 } from '@atproto/api' 9 + import {Plural, Trans, useLingui} from '@lingui/react/macro' 0 0 10 import {useQueryClient} from '@tanstack/react-query' 11 12 import {sanitizeHandle} from '#/lib/strings/handles' ··· 71 }: Props & Omit<LinkProps, 'to' | 'label'>) { 72 const queryClient = useQueryClient() 73 74 + const href = useMemo(() => { 75 return createProfileFeedHref({feed: view}) 76 }, [view]) 77 78 + useEffect(() => { 79 precacheFeedFromGeneratorView(queryClient, view) 80 }, [view, queryClient]) 81 ··· 210 description, 211 ...rest 212 }: {description?: string} & Partial<RichTextProps>) { 213 + const rt = useMemo(() => { 214 if (!description) return 215 const rt = new RichTextApi({text: description || ''}) 216 rt.detectFacetsWithoutResolution() ··· 277 pin?: boolean 278 text?: boolean 279 } & Partial<ButtonProps>) { 280 + const {t: l} = useLingui() 281 const {data: preferences} = usePreferencesQuery() 282 const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} = 283 useAddSavedFeedsMutation() ··· 287 const uri = view.uri 288 const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list' 289 290 + const savedFeedConfig = useMemo(() => { 291 return preferences?.savedFeeds?.find(feed => feed.value === uri) 292 }, [preferences?.savedFeeds, uri]) 293 const removePromptControl = Prompt.usePromptControl() 294 const isPending = isAddSavedFeedPending || isRemovePending 295 296 + const toggleSave = useCallback( 297 async (e: GestureResponderEvent) => { 298 e.preventDefault() 299 e.stopPropagation() ··· 310 }, 311 ]) 312 } 313 + Toast.show(l({message: 'Feeds updated!', context: 'toast'})) 314 } catch (err: any) { 315 logger.error(err, {message: `FeedCard: failed to update feeds`, pin}) 316 + Toast.show(l`Failed to update feeds`, 'xmark') 317 } 318 }, 319 + [l, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type], 320 ) 321 322 + const onPromptRemoveFeed = useCallback( 323 + (e: GestureResponderEvent) => { 324 e.preventDefault() 325 e.stopPropagation() 326 ··· 333 <> 334 <Button 335 disabled={isPending} 336 + label={l`Add this feed to your feeds`} 337 size="small" 338 variant="solid" 339 color={savedFeedConfig ? 'secondary' : 'primary'} 340 + onPress={(e: GestureResponderEvent) => 341 + savedFeedConfig ? onPromptRemoveFeed(e) : void toggleSave(e) 342 + } 343 {...buttonProps}> 344 {savedFeedConfig ? ( 345 <> ··· 350 )} 351 {text && ( 352 <ButtonText> 353 + <Trans>Unpin feed</Trans> 354 </ButtonText> 355 )} 356 </> ··· 359 <ButtonIcon size="md" icon={isPending ? Loader : PinIcon} /> 360 {text && ( 361 <ButtonText> 362 + <Trans>Pin feed</Trans> 363 </ButtonText> 364 )} 365 </> ··· 368 369 <Prompt.Basic 370 control={removePromptControl} 371 + title={l`Remove from your feeds?`} 372 + description={l`Are you sure you want to remove this from your feeds?`} 373 + onConfirm={(e: GestureResponderEvent) => void toggleSave(e)} 374 + confirmButtonCta={l`Remove`} 0 0 375 confirmButtonColor="negative" 376 /> 377 </>

+42 -46

src/components/ProfileCard.tsx

··· 11 type ModerationOpts, 12 RichText as RichTextApi, 13 } from '@atproto/api' 14 - import {msg} from '@lingui/core/macro' 15 - import {useLingui} from '@lingui/react' 16 17 import {getModerationCauseKey} from '#/lib/moderation' 18 import {forceLTR} from '#/lib/strings/bidi' ··· 56 testID, 57 position, 58 contextProfileDid, 0 59 }: { 60 profile: bsky.profile.AnyProfileView 61 moderationOpts: ModerationOpts ··· 63 testID?: string 64 position?: number 65 contextProfileDid?: string 0 66 }) { 67 return ( 68 - <Link testID={testID} profile={profile}> 69 <Card 70 profile={profile} 71 moderationOpts={moderationOpts} ··· 135 }: { 136 profile: bsky.profile.AnyProfileView 137 } & Omit<LinkProps, 'to' | 'label'>) { 138 - const {_} = useLingui() 0 139 return ( 140 <InternalLink 141 - label={_( 142 - msg`View ${ 143 - profile.displayName || sanitizeHandle(profile.handle) 144 - }'s profile`, 145 - )} 146 to={{ 147 screen: 'Profile', 148 params: {name: profile.did}, ··· 488 contextProfileDid, 489 ...rest 490 }: FollowButtonProps) { 491 - const {_} = useLingui() 492 const profile = useProfileShadow(profileUnshadowed) 493 const moderation = moderateProfile(profile, moderationOpts) 494 const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue( ··· 505 try { 506 await queueFollow() 507 Toast.show( 508 - _( 509 - msg`Following ${sanitizeDisplayName( 510 - profile.displayName || profile.handle, 511 - moderation.ui('displayName'), 512 - )}`, 513 - ), 514 ) 515 onPressProp?.(e) 516 onFollow?.() 517 - } catch (err: any) { 0 518 if (err?.name !== 'AbortError') { 519 - Toast.show(_(msg`An issue occurred, please try again.`), 'xmark') 520 } 521 } 522 } ··· 527 try { 528 await queueUnfollow() 529 Toast.show( 530 - _( 531 - msg`No longer following ${sanitizeDisplayName( 532 - profile.displayName || profile.handle, 533 - moderation.ui('displayName'), 534 - )}`, 535 - ), 536 ) 537 onPressProp?.(e) 538 - } catch (err: any) { 0 539 if (err?.name !== 'AbortError') { 540 - Toast.show(_(msg`An issue occurred, please try again.`), 'xmark') 541 } 542 } 543 } 544 545 - const unfollowLabel = _( 546 - msg({ 547 - message: 'Following', 548 - comment: 'User is following this account, click to unfollow', 549 - }), 550 - ) 551 const followLabel = profile.viewer?.followedBy 552 - ? _( 553 - msg({ 554 - message: 'Follow back', 555 - comment: 'User is not following this account, click to follow back', 556 - }), 557 - ) 558 - : _( 559 - msg({ 560 - message: 'Follow', 561 - comment: 'User is not following this account, click to follow', 562 - }), 563 - ) 564 565 if (!profile.viewer) return null 566 if ( ··· 579 variant="solid" 580 color="secondary" 581 {...rest} 582 - onPress={onPressUnfollow}> 0 0 583 {withIcon && ( 584 <ButtonIcon icon={Check} position={isRound ? undefined : 'left'} /> 585 )} ··· 592 variant="solid" 593 color={colorInverted ? 'secondary_inverted' : 'primary'} 594 {...rest} 595 - onPress={onPressFollow}> 0 0 596 {withIcon && ( 597 <ButtonIcon icon={Plus} position={isRound ? undefined : 'left'} /> 598 )}

··· 11 type ModerationOpts, 12 RichText as RichTextApi, 13 } from '@atproto/api' 14 + import {useLingui} from '@lingui/react/macro' 0 15 16 import {getModerationCauseKey} from '#/lib/moderation' 17 import {forceLTR} from '#/lib/strings/bidi' ··· 55 testID, 56 position, 57 contextProfileDid, 58 + onPress, 59 }: { 60 profile: bsky.profile.AnyProfileView 61 moderationOpts: ModerationOpts ··· 63 testID?: string 64 position?: number 65 contextProfileDid?: string 66 + onPress?: (e: GestureResponderEvent) => void 67 }) { 68 return ( 69 + <Link testID={testID} profile={profile} onPress={onPress}> 70 <Card 71 profile={profile} 72 moderationOpts={moderationOpts} ··· 136 }: { 137 profile: bsky.profile.AnyProfileView 138 } & Omit<LinkProps, 'to' | 'label'>) { 139 + const {t: l} = useLingui() 140 + 141 return ( 142 <InternalLink 143 + label={l`View ${ 144 + profile.displayName || sanitizeHandle(profile.handle) 145 + }’s profile`} 0 0 146 to={{ 147 screen: 'Profile', 148 params: {name: profile.did}, ··· 488 contextProfileDid, 489 ...rest 490 }: FollowButtonProps) { 491 + const {t: l} = useLingui() 492 const profile = useProfileShadow(profileUnshadowed) 493 const moderation = moderateProfile(profile, moderationOpts) 494 const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue( ··· 505 try { 506 await queueFollow() 507 Toast.show( 508 + l`Following ${sanitizeDisplayName( 509 + profile.displayName || profile.handle, 510 + moderation.ui('displayName'), 511 + )}`, 0 0 512 ) 513 onPressProp?.(e) 514 onFollow?.() 515 + } catch (e) { 516 + const err = e as Error 517 if (err?.name !== 'AbortError') { 518 + Toast.show(l`An issue occurred, please try again.`, 'xmark') 519 } 520 } 521 } ··· 526 try { 527 await queueUnfollow() 528 Toast.show( 529 + l`No longer following ${sanitizeDisplayName( 530 + profile.displayName || profile.handle, 531 + moderation.ui('displayName'), 532 + )}`, 0 0 533 ) 534 onPressProp?.(e) 535 + } catch (e) { 536 + const err = e as Error 537 if (err?.name !== 'AbortError') { 538 + Toast.show(l`An issue occurred, please try again.`, 'xmark') 539 } 540 } 541 } 542 543 + const unfollowLabel = l({ 544 + message: 'Following', 545 + comment: 'User is following this account, click to unfollow', 546 + }) 0 0 547 const followLabel = profile.viewer?.followedBy 548 + ? l({ 549 + message: 'Follow back', 550 + comment: 'User is not following this account, click to follow back', 551 + }) 552 + : l({ 553 + message: 'Follow', 554 + comment: 'User is not following this account, click to follow', 555 + }) 0 0 0 0 556 557 if (!profile.viewer) return null 558 if ( ··· 571 variant="solid" 572 color="secondary" 573 {...rest} 574 + onPress={(e: GestureResponderEvent) => { 575 + void onPressUnfollow(e) 576 + }}> 577 {withIcon && ( 578 <ButtonIcon icon={Check} position={isRound ? undefined : 'left'} /> 579 )} ··· 586 variant="solid" 587 color={colorInverted ? 'secondary_inverted' : 'primary'} 588 {...rest} 589 + onPress={(e: GestureResponderEvent) => { 590 + void onPressFollow(e) 591 + }}> 592 {withIcon && ( 593 <ButtonIcon icon={Plus} position={isRound ? undefined : 'left'} /> 594 )}

+7 -8

src/components/forms/SearchInput.tsx

··· 1 - import React from 'react' 2 import {type TextInput, View} from 'react-native' 3 - import {msg} from '@lingui/core/macro' 4 - import {useLingui} from '@lingui/react' 5 6 import {HITSLOP_10} from '#/lib/constants' 7 import {atoms as a, useTheme} from '#/alf' ··· 19 onClearText?: () => void 20 } 21 22 - export const SearchInput = React.forwardRef<TextInput, SearchInputProps>( 23 function SearchInput({value, label, onClearText, ...rest}, ref) { 24 const t = useTheme() 25 - const {_} = useLingui() 26 const showClear = value && value.length > 0 27 28 return ( ··· 31 <TextField.Icon icon={MagnifyingGlassIcon} /> 32 <TextField.Input 33 inputRef={ref} 34 - label={label || _(msg`Search`)} 35 value={value} 36 - placeholder={_(msg`Search`)} 37 returnKeyType="search" 38 keyboardAppearance={t.scheme} 39 selectTextOnFocus={IS_NATIVE} ··· 67 <Button 68 testID="searchTextInputClearBtn" 69 onPress={onClearText} 70 - label={_(msg`Clear search query`)} 71 hitSlop={HITSLOP_10} 72 size="tiny" 73 shape="round"

··· 1 + import {forwardRef} from 'react' 2 import {type TextInput, View} from 'react-native' 3 + import {useLingui} from '@lingui/react/macro' 0 4 5 import {HITSLOP_10} from '#/lib/constants' 6 import {atoms as a, useTheme} from '#/alf' ··· 18 onClearText?: () => void 19 } 20 21 + export const SearchInput = forwardRef<TextInput, SearchInputProps>( 22 function SearchInput({value, label, onClearText, ...rest}, ref) { 23 const t = useTheme() 24 + const {t: l} = useLingui() 25 const showClear = value && value.length > 0 26 27 return ( ··· 30 <TextField.Icon icon={MagnifyingGlassIcon} /> 31 <TextField.Input 32 inputRef={ref} 33 + label={label || l`Search`} 34 value={value} 35 + placeholder={l`Search`} 36 returnKeyType="search" 37 keyboardAppearance={t.scheme} 38 selectTextOnFocus={IS_NATIVE} ··· 66 <Button 67 testID="searchTextInputClearBtn" 68 onPress={onClearText} 69 + label={l`Clear search query`} 70 hitSlop={HITSLOP_10} 71 size="tiny" 72 shape="round"

+136 -11

src/screens/Search/SearchResults.tsx

··· 5 6 import {urls} from '#/lib/constants' 7 import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking' 0 8 import {cleanError} from '#/lib/strings/errors' 9 import {augmentSearchQuery} from '#/lib/strings/helpers' 10 import {useActorSearch} from '#/state/queries/actor-search' ··· 25 import {ListFooter} from '#/components/Lists' 26 import {SearchError} from '#/components/SearchError' 27 import {Text} from '#/components/Typography' 0 28 import type * as bsky from '#/types/bsky' 29 30 let SearchResults = ({ ··· 161 ) 162 } 163 164 - function NoResultsText({query}: {query: string}) { 0 0 0 0 0 165 const t = useTheme() 166 const {t: l} = useLingui() 167 ··· 185 })} 186 to={urls.website.blog.searchTipsAndTricks} 187 style={[a.text_md, a.leading_snug]}> 188 - read about how to use search filters 189 </InlineLinkText> 190 . 191 </Trans> ··· 214 sort?: 'top' | 'latest' 215 active: boolean 216 }): React.ReactNode => { 0 217 const {t: l} = useLingui() 218 const {currentAccount, hasSession} = useSession() 219 const [isPTR, setIsPTR] = useState(false) ··· 277 const closeAllActiveElements = useCloseAllActiveElements() 278 const {requestSwitchToAccount} = useLoggedOutViewControls() 279 0 0 0 0 0 0 0 0 0 0 0 0 0 280 const showSignIn = () => { 281 closeAllActiveElements() 282 requestSwitchToAccount({requestedAccount: 'none'}) ··· 292 <SearchError title={l`Search is currently unavailable when logged out`}> 293 <Text style={[a.text_md, a.text_center, a.leading_snug]}> 294 <Trans> 295 - <InlineLinkText label={l`Sign in`} to={'#'} onPress={showSignIn}> 296 Sign in 297 </InlineLinkText> 298 <Text style={t.atoms.text_contrast_medium}> or </Text> ··· 315 316 return error ? ( 317 <EmptyState 318 - messageText={l`We're sorry, but your search could not be completed. Please try again in a few minutes.`} 319 error={cleanError(error)} 320 /> 321 ) : ( ··· 325 {posts.length ? ( 326 <List 327 data={items} 328 - renderItem={({item}: {item: SearchResultSlice}) => { 0 0 0 0 0 0 329 if (item.type === 'post') { 330 - return <Post post={item.post} /> 0 0 331 } else { 332 return null 333 } ··· 363 } 364 SearchScreenPostResults = memo(SearchScreenPostResults) 365 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 366 let SearchScreenUserResults = ({ 367 query, 368 active, ··· 370 query: string 371 active: boolean 372 }): React.ReactNode => { 0 373 const {t: l} = useLingui() 374 const {hasSession} = useSession() 375 const [isPTR, setIsPTR] = useState(false) ··· 403 return results?.pages.flatMap(page => page.actors) || [] 404 }, [results]) 405 0 0 0 0 0 0 0 0 0 0 406 if (error) { 407 return ( 408 <EmptyState ··· 417 {profiles.length ? ( 418 <List 419 data={profiles} 420 - renderItem={({item}: {item: bsky.profile.AnyProfileView}) => ( 421 - <ProfileCardWithFollowBtn profile={item} /> 422 - )} 0 0 0 0 423 keyExtractor={(item: bsky.profile.AnyProfileView) => item.did} 424 refreshing={isPTR} 425 onRefresh={() => void onPullToRefresh()} ··· 442 } 443 SearchScreenUserResults = memo(SearchScreenUserResults) 444 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 445 let SearchScreenFeedsResults = ({ 446 query, 447 active, ··· 449 query: string 450 active: boolean 451 }): React.ReactNode => { 0 452 const t = useTheme() 453 454 const {data: results, isFetched} = usePopularFeedsSearch({ ··· 456 enabled: active, 457 }) 458 0 0 0 0 0 0 0 0 0 0 459 return isFetched && results ? ( 460 <> 461 {results.length ? ( 462 <List 463 data={results} 464 - renderItem={({item}: {item: AppBskyFeedDefs.GeneratorView}) => ( 0 0 0 0 0 0 465 <View 466 style={[ 467 a.border_t, ··· 469 a.px_lg, 470 a.py_lg, 471 ]}> 472 - <FeedCard.Default view={item} /> 473 </View> 474 )} 475 keyExtractor={(item: AppBskyFeedDefs.GeneratorView) => item.uri} ··· 485 ) 486 } 487 SearchScreenFeedsResults = memo(SearchScreenFeedsResults) 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

··· 5 6 import {urls} from '#/lib/constants' 7 import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking' 8 + import {useCallOnce} from '#/lib/once' 9 import {cleanError} from '#/lib/strings/errors' 10 import {augmentSearchQuery} from '#/lib/strings/helpers' 11 import {useActorSearch} from '#/state/queries/actor-search' ··· 26 import {ListFooter} from '#/components/Lists' 27 import {SearchError} from '#/components/SearchError' 28 import {Text} from '#/components/Typography' 29 + import {type Metrics, useAnalytics} from '#/analytics' 30 import type * as bsky from '#/types/bsky' 31 32 let SearchResults = ({ ··· 163 ) 164 } 165 166 + function NoResultsText({ 167 + query, 168 + }: { 169 + sort?: 'top' | 'latest' | 'people' | 'feeds' 170 + query: string 171 + }) { 172 const t = useTheme() 173 const {t: l} = useLingui() 174 ··· 192 })} 193 to={urls.website.blog.searchTipsAndTricks} 194 style={[a.text_md, a.leading_snug]}> 195 + read about how to use search filters. 196 </InlineLinkText> 197 . 198 </Trans> ··· 221 sort?: 'top' | 'latest' 222 active: boolean 223 }): React.ReactNode => { 224 + const ax = useAnalytics() 225 const {t: l} = useLingui() 226 const {currentAccount, hasSession} = useSession() 227 const [isPTR, setIsPTR] = useState(false) ··· 285 const closeAllActiveElements = useCloseAllActiveElements() 286 const {requestSwitchToAccount} = useLoggedOutViewControls() 287 288 + const fireTracking = useCallOnce(() => { 289 + if (sort) { 290 + // ts only 291 + ax.metric('search:results:loaded', { 292 + tab: sort, 293 + initialCount: items.length, 294 + }) 295 + } 296 + }) 297 + if (isFetched && sort) { 298 + fireTracking() 299 + } 300 + 301 const showSignIn = () => { 302 closeAllActiveElements() 303 requestSwitchToAccount({requestedAccount: 'none'}) ··· 313 <SearchError title={l`Search is currently unavailable when logged out`}> 314 <Text style={[a.text_md, a.text_center, a.leading_snug]}> 315 <Trans> 316 + <InlineLinkText label={l`Sign in`} to="#" onPress={showSignIn}> 317 Sign in 318 </InlineLinkText> 319 <Text style={t.atoms.text_contrast_medium}> or </Text> ··· 336 337 return error ? ( 338 <EmptyState 339 + messageText={l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`} 340 error={cleanError(error)} 341 /> 342 ) : ( ··· 346 {posts.length ? ( 347 <List 348 data={items} 349 + renderItem={({ 350 + item, 351 + index, 352 + }: { 353 + item: SearchResultSlice 354 + index: number 355 + }) => { 356 if (item.type === 'post') { 357 + return ( 358 + <SearchPost from={sort} position={index} post={item.post} /> 359 + ) 360 } else { 361 return null 362 } ··· 392 } 393 SearchScreenPostResults = memo(SearchScreenPostResults) 394 395 + function SearchPost({ 396 + from, 397 + position, 398 + post, 399 + }: { 400 + from: Metrics['search:result:press']['tab'] 401 + position: Metrics['search:result:press']['position'] 402 + post: AppBskyFeedDefs.PostView 403 + }) { 404 + const ax = useAnalytics() 405 + 406 + const onBeforePress = useCallback(() => { 407 + ax.metric('search:result:press', { 408 + tab: from, 409 + resultType: 'post', 410 + position, 411 + uri: post.uri, 412 + }) 413 + }, [ax, from, position, post]) 414 + 415 + return <Post post={post} onBeforePress={onBeforePress} /> 416 + } 417 + 418 let SearchScreenUserResults = ({ 419 query, 420 active, ··· 422 query: string 423 active: boolean 424 }): React.ReactNode => { 425 + const ax = useAnalytics() 426 const {t: l} = useLingui() 427 const {hasSession} = useSession() 428 const [isPTR, setIsPTR] = useState(false) ··· 456 return results?.pages.flatMap(page => page.actors) || [] 457 }, [results]) 458 459 + const fireTracking = useCallOnce(() => { 460 + ax.metric('search:results:loaded', { 461 + tab: 'people', 462 + initialCount: profiles.length, 463 + }) 464 + }) 465 + if (isFetched) { 466 + fireTracking() 467 + } 468 + 469 if (error) { 470 return ( 471 <EmptyState ··· 480 {profiles.length ? ( 481 <List 482 data={profiles} 483 + renderItem={({ 484 + item, 485 + index, 486 + }: { 487 + item: bsky.profile.AnyProfileView 488 + index: number 489 + }) => <SearchScreenProfileButton position={index} profile={item} />} 490 keyExtractor={(item: bsky.profile.AnyProfileView) => item.did} 491 refreshing={isPTR} 492 onRefresh={() => void onPullToRefresh()} ··· 509 } 510 SearchScreenUserResults = memo(SearchScreenUserResults) 511 512 + function SearchScreenProfileButton({ 513 + position, 514 + profile, 515 + }: { 516 + position: number 517 + profile: bsky.profile.AnyProfileView 518 + }) { 519 + const ax = useAnalytics() 520 + 521 + const handlePress = () => { 522 + ax.metric('search:result:press', { 523 + tab: 'people', 524 + resultType: 'profile', 525 + position, 526 + uri: profile.did, 527 + }) 528 + } 529 + return <ProfileCardWithFollowBtn profile={profile} onPress={handlePress} /> 530 + } 531 + 532 let SearchScreenFeedsResults = ({ 533 query, 534 active, ··· 536 query: string 537 active: boolean 538 }): React.ReactNode => { 539 + const ax = useAnalytics() 540 const t = useTheme() 541 542 const {data: results, isFetched} = usePopularFeedsSearch({ ··· 544 enabled: active, 545 }) 546 547 + const fireTracking = useCallOnce(() => { 548 + ax.metric('search:results:loaded', { 549 + tab: 'feeds', 550 + initialCount: results?.length ?? 0, 551 + }) 552 + }) 553 + if (isFetched) { 554 + fireTracking() 555 + } 556 + 557 return isFetched && results ? ( 558 <> 559 {results.length ? ( 560 <List 561 data={results} 562 + renderItem={({ 563 + item, 564 + index, 565 + }: { 566 + item: AppBskyFeedDefs.GeneratorView 567 + index: number 568 + }) => ( 569 <View 570 style={[ 571 a.border_t, ··· 573 a.px_lg, 574 a.py_lg, 575 ]}> 576 + <SearchFeedCard position={index} view={item} /> 577 </View> 578 )} 579 keyExtractor={(item: AppBskyFeedDefs.GeneratorView) => item.uri} ··· 589 ) 590 } 591 SearchScreenFeedsResults = memo(SearchScreenFeedsResults) 592 + 593 + function SearchFeedCard({ 594 + position, 595 + view, 596 + }: { 597 + position: number 598 + view: AppBskyFeedDefs.GeneratorView 599 + }) { 600 + const ax = useAnalytics() 601 + 602 + const handleOnPress = () => { 603 + ax.metric('search:result:press', { 604 + tab: 'feeds', 605 + resultType: 'feed', 606 + position, 607 + uri: view.uri, 608 + }) 609 + } 610 + 611 + return <FeedCard.Default view={view} onPress={handleOnPress} /> 612 + }

+13 -5

src/screens/Search/Shell.tsx

··· 38 import {SearchInput} from '#/components/forms/SearchInput' 39 import * as Layout from '#/components/Layout' 40 import {Text} from '#/components/Typography' 0 41 import {IS_WEB} from '#/env' 42 import {account, useStorage} from '#/storage' 43 import type * as bsky from '#/types/bsky' ··· 79 inputPlaceholder?: string 80 isExplore?: boolean 81 }) { 0 82 const t = useTheme() 83 const {gtMobile} = useBreakpoints() 84 const navigation = useNavigation<NavigationProp>() ··· 225 } 226 }, [setShowAutocomplete, setSearchText, navigation, route.params, route.name]) 227 228 - const onSubmit = useCallback(() => { 229 - navigateToItem(searchText) 230 - }, [navigateToItem, searchText]) 0 0 0 0 0 0 231 232 const onAutocompleteResultPress = useCallback(() => { 233 if (IS_WEB) { ··· 367 onFocus={onSearchInputFocus} 368 onChangeText={onChangeText} 369 onClearText={onPressClearQuery} 370 - onSubmitEditing={onSubmit} 371 placeholder={ 372 inputPlaceholder ?? l`Search for posts, users, or feeds` 373 } ··· 420 isAutocompleteFetching={isAutocompleteFetching} 421 autocompleteData={autocompleteData} 422 searchText={searchText} 423 - onSubmit={onSubmit} 424 onResultPress={onAutocompleteResultPress} 425 onProfileClick={handleProfileClick} 426 />

··· 38 import {SearchInput} from '#/components/forms/SearchInput' 39 import * as Layout from '#/components/Layout' 40 import {Text} from '#/components/Typography' 41 + import {useAnalytics} from '#/analytics' 42 import {IS_WEB} from '#/env' 43 import {account, useStorage} from '#/storage' 44 import type * as bsky from '#/types/bsky' ··· 80 inputPlaceholder?: string 81 isExplore?: boolean 82 }) { 83 + const ax = useAnalytics() 84 const t = useTheme() 85 const {gtMobile} = useBreakpoints() 86 const navigation = useNavigation<NavigationProp>() ··· 227 } 228 }, [setShowAutocomplete, setSearchText, navigation, route.params, route.name]) 229 230 + const onSubmit = useCallback( 231 + (source: 'typed' | 'autocomplete') => () => { 232 + ax.metric('search:query', { 233 + source, 234 + }) 235 + navigateToItem(searchText) 236 + }, 237 + [ax, navigateToItem, searchText], 238 + ) 239 240 const onAutocompleteResultPress = useCallback(() => { 241 if (IS_WEB) { ··· 375 onFocus={onSearchInputFocus} 376 onChangeText={onChangeText} 377 onClearText={onPressClearQuery} 378 + onSubmitEditing={onSubmit('typed')} 379 placeholder={ 380 inputPlaceholder ?? l`Search for posts, users, or feeds` 381 } ··· 428 isAutocompleteFetching={isAutocompleteFetching} 429 autocompleteData={autocompleteData} 430 searchText={searchText} 431 + onSubmit={onSubmit('autocomplete')} 432 onResultPress={onAutocompleteResultPress} 433 onProfileClick={handleProfileClick} 434 />

+7 -1

src/screens/Search/components/AutocompleteResults.tsx

··· 9 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard' 10 import {atoms as a, native} from '#/alf' 11 import * as Layout from '#/components/Layout' 0 12 import {IS_NATIVE} from '#/env' 13 14 let AutocompleteResults = ({ ··· 26 onResultPress: () => void 27 onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void 28 }): React.ReactNode => { 0 29 const {_} = useLingui() 30 const moderationOpts = useModerationOpts() 31 return ( ··· 51 } 52 style={a.border_b} 53 /> 54 - {autocompleteData?.map(item => ( 55 <SearchProfileCard 56 key={item.did} 57 profile={item} 58 moderationOpts={moderationOpts} 59 onPress={() => { 0 0 0 0 60 onProfileClick(item) 61 onResultPress() 62 }}

··· 9 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard' 10 import {atoms as a, native} from '#/alf' 11 import * as Layout from '#/components/Layout' 12 + import {useAnalytics} from '#/analytics' 13 import {IS_NATIVE} from '#/env' 14 15 let AutocompleteResults = ({ ··· 27 onResultPress: () => void 28 onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void 29 }): React.ReactNode => { 30 + const ax = useAnalytics() 31 const {_} = useLingui() 32 const moderationOpts = useModerationOpts() 33 return ( ··· 53 } 54 style={a.border_b} 55 /> 56 + {autocompleteData?.map((item, index) => ( 57 <SearchProfileCard 58 key={item.did} 59 profile={item} 60 moderationOpts={moderationOpts} 61 onPress={() => { 62 + ax.metric('search:autocomplete:press', { 63 + profileDid: item.did, 64 + position: index, 65 + }) 66 onProfileClick(item) 67 onResultPress() 68 }}

+22 -11

src/screens/Search/components/SearchHistory.tsx

··· 1 import {Pressable, ScrollView, View} from 'react-native' 2 import {moderateProfile, type ModerationOpts} from '@atproto/api' 3 - import {msg} from '@lingui/core/macro' 4 - import {useLingui} from '@lingui/react' 5 - import {Trans} from '@lingui/react/macro' 6 7 import {createHitslop, HITSLOP_10} from '#/lib/constants' 8 import {makeProfileLink} from '#/lib/routes/links' ··· 19 import {Text} from '#/components/Typography' 20 import {useSimpleVerificationState} from '#/components/verification' 21 import {VerificationCheck} from '#/components/verification/VerificationCheck' 0 22 import type * as bsky from '#/types/bsky' 23 24 export function SearchHistory({ ··· 36 onRemoveItemClick: (item: string) => void 37 onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void 38 }) { 39 - const {_} = useLingui() 0 40 const moderationOpts = useModerationOpts() 41 42 return ( ··· 47 {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( 48 <View style={[a.px_lg, a.pt_sm]}> 49 <Text style={[a.text_md, a.font_semi_bold]}> 50 - <Trans>Recent Searches</Trans> 51 </Text> 52 </View> 53 )} ··· 66 a.gap_xl, 67 ]}> 68 {moderationOpts && 69 - selectedProfiles.map(profile => ( 70 <RecentProfileItem 71 key={profile.did} 72 profile={profile} 73 moderationOpts={moderationOpts} 74 - onPress={() => onProfileClick(profile)} 0 0 0 0 0 0 75 onRemove={() => onRemoveProfileClick(profile)} 76 /> 77 ))} ··· 86 <View key={index} style={[a.flex_row, a.align_center]}> 87 <Pressable 88 accessibilityRole="button" 89 - onPress={() => onItemClick(historyItem)} 0 0 0 0 0 90 hitSlop={HITSLOP_10} 91 style={[a.flex_1, a.py_sm]}> 92 <Text style={[a.text_md]}>{historyItem}</Text> 93 </Pressable> 94 <Button 95 - label={_(msg`Remove ${historyItem}`)} 96 onPress={() => onRemoveItemClick(historyItem)} 97 size="small" 98 variant="ghost" ··· 120 onPress: () => void 121 onRemove: () => void 122 }) { 123 - const {_} = useLingui() 124 const width = 80 125 126 const moderation = moderateProfile(profile, moderationOpts) ··· 165 </View> 166 </Link> 167 <Button 168 - label={_(msg`Remove profile`)} 169 hitSlop={createHitslop(6)} 170 size="tiny" 171 variant="outline"

··· 1 import {Pressable, ScrollView, View} from 'react-native' 2 import {moderateProfile, type ModerationOpts} from '@atproto/api' 3 + import {Trans, useLingui} from '@lingui/react/macro' 0 0 4 5 import {createHitslop, HITSLOP_10} from '#/lib/constants' 6 import {makeProfileLink} from '#/lib/routes/links' ··· 17 import {Text} from '#/components/Typography' 18 import {useSimpleVerificationState} from '#/components/verification' 19 import {VerificationCheck} from '#/components/verification/VerificationCheck' 20 + import {useAnalytics} from '#/analytics' 21 import type * as bsky from '#/types/bsky' 22 23 export function SearchHistory({ ··· 35 onRemoveItemClick: (item: string) => void 36 onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void 37 }) { 38 + const ax = useAnalytics() 39 + const {t: l} = useLingui() 40 const moderationOpts = useModerationOpts() 41 42 return ( ··· 47 {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( 48 <View style={[a.px_lg, a.pt_sm]}> 49 <Text style={[a.text_md, a.font_semi_bold]}> 50 + <Trans>Recent searches</Trans> 51 </Text> 52 </View> 53 )} ··· 66 a.gap_xl, 67 ]}> 68 {moderationOpts && 69 + selectedProfiles.map((profile, index) => ( 70 <RecentProfileItem 71 key={profile.did} 72 profile={profile} 73 moderationOpts={moderationOpts} 74 + onPress={() => { 75 + ax.metric('search:recent:press', { 76 + profileDid: profile.did, 77 + position: index, 78 + }) 79 + onProfileClick(profile) 80 + }} 81 onRemove={() => onRemoveProfileClick(profile)} 82 /> 83 ))} ··· 92 <View key={index} style={[a.flex_row, a.align_center]}> 93 <Pressable 94 accessibilityRole="button" 95 + onPress={() => { 96 + ax.metric('search:query', { 97 + source: 'history', 98 + }) 99 + onItemClick(historyItem) 100 + }} 101 hitSlop={HITSLOP_10} 102 style={[a.flex_1, a.py_sm]}> 103 <Text style={[a.text_md]}>{historyItem}</Text> 104 </Pressable> 105 <Button 106 + label={l`Remove ${historyItem}`} 107 onPress={() => onRemoveItemClick(historyItem)} 108 size="small" 109 variant="ghost" ··· 131 onPress: () => void 132 onRemove: () => void 133 }) { 134 + const {t: l} = useLingui() 135 const width = 80 136 137 const moderation = moderateProfile(profile, moderationOpts) ··· 176 </View> 177 </Link> 178 <Button 179 + label={l`Remove profile`} 180 hitSlop={createHitslop(6)} 181 size="tiny" 182 variant="outline"

+4 -1

src/view/com/profile/ProfileCard.tsx

··· 1 - import {View} from 'react-native' 2 3 import {useModerationOpts} from '#/state/preferences/moderation-opts' 4 import {atoms as a, useTheme} from '#/alf' ··· 11 logContext = 'ProfileCard', 12 position, 13 contextProfileDid, 0 14 }: { 15 profile: bsky.profile.AnyProfileView 16 noBorder?: boolean 17 logContext?: 'ProfileCard' | 'StarterPackProfilesList' 18 position?: number 19 contextProfileDid?: string 0 20 }) { 21 const t = useTheme() 22 const moderationOpts = useModerationOpts() ··· 36 logContext={logContext} 37 position={position} 38 contextProfileDid={contextProfileDid} 0 39 /> 40 </View> 41 )

··· 1 + import {type GestureResponderEvent, View} from 'react-native' 2 3 import {useModerationOpts} from '#/state/preferences/moderation-opts' 4 import {atoms as a, useTheme} from '#/alf' ··· 11 logContext = 'ProfileCard', 12 position, 13 contextProfileDid, 14 + onPress, 15 }: { 16 profile: bsky.profile.AnyProfileView 17 noBorder?: boolean 18 logContext?: 'ProfileCard' | 'StarterPackProfilesList' 19 position?: number 20 contextProfileDid?: string 21 + onPress?: (e: GestureResponderEvent) => void 22 }) { 23 const t = useTheme() 24 const moderationOpts = useModerationOpts() ··· 38 logContext={logContext} 39 position={position} 40 contextProfileDid={contextProfileDid} 41 + onPress={onPress} 42 /> 43 </View> 44 )

+11 -12

src/view/shell/desktop/Search.tsx

··· 1 - import React from 'react' 2 import { 3 ActivityIndicator, 4 StyleSheet, ··· 6 View, 7 type ViewStyle, 8 } from 'react-native' 9 - import {msg} from '@lingui/core/macro' 10 - import {useLingui} from '@lingui/react' 11 import {StackActions, useNavigation} from '@react-navigation/native' 12 13 import {usePalette} from '#/lib/hooks/usePalette' ··· 68 </Link> 69 ) 70 } 71 - SearchLinkCard = React.memo(SearchLinkCard) 72 export {SearchLinkCard} 73 74 export function DesktopSearch() { 75 - const {_} = useLingui() 76 const pal = usePalette('default') 77 const navigation = useNavigation<NavigationProp>() 78 - const [isActive, setIsActive] = React.useState<boolean>(false) 79 - const [query, setQuery] = React.useState<string>('') 80 const {data: autocompleteData, isFetching} = useActorAutocompleteQuery( 81 query, 82 true, ··· 84 85 const moderationOpts = useModerationOpts() 86 87 - const onChangeText = React.useCallback((text: string) => { 88 setQuery(text) 89 setIsActive(text.length > 0) 90 }, []) 91 92 - const onPressCancelSearch = React.useCallback(() => { 93 setQuery('') 94 setIsActive(false) 95 }, [setQuery]) 96 97 - const onSubmit = React.useCallback(() => { 98 setIsActive(false) 99 if (!query.length) return 100 navigation.dispatch(StackActions.push('Search', {q: query})) 101 }, [query, navigation]) 102 103 - const onSearchProfileCardPress = React.useCallback(() => { 104 setQuery('') 105 setIsActive(false) 106 }, []) ··· 128 ) : ( 129 <> 130 <SearchLinkCard 131 - label={_(msg`Search for "${query}"`)} 132 to={`/search?q=${encodeURIComponent(query)}`} 133 style={ 134 (autocompleteData?.length ?? 0) > 0

··· 1 + import {memo, useCallback, useState} from 'react' 2 import { 3 ActivityIndicator, 4 StyleSheet, ··· 6 View, 7 type ViewStyle, 8 } from 'react-native' 9 + import {useLingui} from '@lingui/react/macro' 0 10 import {StackActions, useNavigation} from '@react-navigation/native' 11 12 import {usePalette} from '#/lib/hooks/usePalette' ··· 67 </Link> 68 ) 69 } 70 + SearchLinkCard = memo(SearchLinkCard) 71 export {SearchLinkCard} 72 73 export function DesktopSearch() { 74 + const {t: l} = useLingui() 75 const pal = usePalette('default') 76 const navigation = useNavigation<NavigationProp>() 77 + const [isActive, setIsActive] = useState<boolean>(false) 78 + const [query, setQuery] = useState<string>('') 79 const {data: autocompleteData, isFetching} = useActorAutocompleteQuery( 80 query, 81 true, ··· 83 84 const moderationOpts = useModerationOpts() 85 86 + const onChangeText = useCallback((text: string) => { 87 setQuery(text) 88 setIsActive(text.length > 0) 89 }, []) 90 91 + const onPressCancelSearch = useCallback(() => { 92 setQuery('') 93 setIsActive(false) 94 }, [setQuery]) 95 96 + const onSubmit = useCallback(() => { 97 setIsActive(false) 98 if (!query.length) return 99 navigation.dispatch(StackActions.push('Search', {q: query})) 100 }, [query, navigation]) 101 102 + const onSearchProfileCardPress = useCallback(() => { 103 setQuery('') 104 setIsActive(false) 105 }, []) ··· 127 ) : ( 128 <> 129 <SearchLinkCard 130 + label={l`Search for "${query}"`} 131 to={`/search?q=${encodeURIComponent(query)}`} 132 style={ 133 (autocompleteData?.length ?? 0) > 0