diff options
| -rw-r--r-- | src/screens/Search/Shell.tsx | 2 | ||||
| -rw-r--r-- | src/screens/Search/components/SearchHistory.tsx | 178 |
2 files changed, 73 insertions, 107 deletions
diff --git a/src/screens/Search/Shell.tsx b/src/screens/Search/Shell.tsx index 20aafd623..959677784 100644 --- a/src/screens/Search/Shell.tsx +++ b/src/screens/Search/Shell.tsx @@ -112,7 +112,7 @@ export function SearchScreenShell({ const newAccountHistory = [ item.did, ...accountHistory.filter(p => p !== item.did), - ].slice(0, 5) + ].slice(0, 10) setAccountHistory(newAccountHistory) }, [accountHistory, setAccountHistory], diff --git a/src/screens/Search/components/SearchHistory.tsx b/src/screens/Search/components/SearchHistory.tsx index 048203ed8..1d7c68e13 100644 --- a/src/screens/Search/components/SearchHistory.tsx +++ b/src/screens/Search/components/SearchHistory.tsx @@ -1,4 +1,4 @@ -import {Pressable, ScrollView, StyleSheet, View} from 'react-native' +import {Pressable, ScrollView, View} from 'react-native' import {moderateProfile, type ModerationOpts} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -8,13 +8,13 @@ import {makeProfileLink} from '#/lib/routes/links' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' import {useModerationOpts} from '#/state/preferences/moderation-opts' -import {Link} from '#/view/com/util/Link' import {UserAvatar} from '#/view/com/util/UserAvatar' import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture' -import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf' +import {atoms as a} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times' import * as Layout from '#/components/Layout' +import {Link} from '#/components/Link' import {Text} from '#/components/Typography' import {useSimpleVerificationState} from '#/components/verification' import {VerificationCheck} from '#/components/verification/VerificationCheck' @@ -35,7 +35,6 @@ export function SearchHistory({ onRemoveItemClick: (item: string) => void onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void }) { - const {gtMobile} = useBreakpoints() const {_} = useLingui() const moderationOpts = useModerationOpts() @@ -43,54 +42,52 @@ export function SearchHistory({ <Layout.Content keyboardDismissMode="interactive" keyboardShouldPersistTaps="handled"> - <View style={[a.w_full, a.px_md]}> + <View style={[a.w_full, a.gap_md]}> {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( - <Text style={[a.text_md, a.font_bold, a.p_md]}> - <Trans>Recent Searches</Trans> - </Text> + <View style={[a.px_lg, a.pt_sm]}> + <Text style={[a.text_md, a.font_bold]}> + <Trans>Recent Searches</Trans> + </Text> + </View> )} + {selectedProfiles.length > 0 && ( - <View - style={[ - styles.selectedProfilesContainer, - !gtMobile && styles.selectedProfilesContainerMobile, - ]}> + <View> <BlockDrawerGesture> <ScrollView horizontal keyboardShouldPersistTaps="handled" showsHorizontalScrollIndicator={false} - style={[ + contentContainerStyle={[ + a.px_lg, a.flex_row, a.flex_nowrap, - {marginHorizontal: tokens.space._2xl * -1}, - ]} - contentContainerStyle={[a.px_2xl, a.border_0]}> + a.gap_xl, + ]}> {moderationOpts && - selectedProfiles - .slice(0, 5) - .map(profile => ( - <RecentProfileItem - key={profile.did} - profile={profile} - moderationOpts={moderationOpts} - onPress={() => onProfileClick(profile)} - onRemove={() => onRemoveProfileClick(profile)} - /> - ))} + selectedProfiles.map(profile => ( + <RecentProfileItem + key={profile.did} + profile={profile} + moderationOpts={moderationOpts} + onPress={() => onProfileClick(profile)} + onRemove={() => onRemoveProfileClick(profile)} + /> + ))} </ScrollView> </BlockDrawerGesture> </View> )} + {searchHistory.length > 0 && ( - <View style={[a.pl_md, a.pr_xs, a.mt_md]}> + <View style={[a.px_lg, a.pt_sm]}> {searchHistory.slice(0, 5).map((historyItem, index) => ( - <View key={index} style={[a.flex_row, a.align_center, a.mt_xs]}> + <View key={index} style={[a.flex_row, a.align_center]}> <Pressable accessibilityRole="button" onPress={() => onItemClick(historyItem)} hitSlop={HITSLOP_10} - style={[a.flex_1, a.py_md]}> + style={[a.flex_1, a.py_sm]}> <Text style={[a.text_md]}>{historyItem}</Text> </Pressable> <Button @@ -123,8 +120,7 @@ function RecentProfileItem({ onRemove: () => void }) { const {_} = useLingui() - const {gtMobile} = useBreakpoints() - const t = useTheme() + const width = 80 const moderation = moderateProfile(profile, moderationOpts) const name = sanitizeDisplayName( @@ -134,88 +130,58 @@ function RecentProfileItem({ const verification = useSimpleVerificationState({profile}) return ( - <View style={[styles.profileItem, !gtMobile && styles.profileItemMobile]}> + <View style={[a.relative]}> <Link - href={makeProfileLink(profile)} - title={profile.handle} - asAnchor - anchorNoUnderline - onBeforePress={onPress} - style={[a.align_center, a.w_full]}> + to={makeProfileLink(profile)} + label={profile.handle} + onPress={onPress} + style={[ + a.flex_col, + a.align_center, + a.gap_xs, + { + width, + }, + ]}> <UserAvatar avatar={profile.avatar} type={profile.associated?.labeler ? 'labeler' : 'user'} - size={60} + size={width - 8} moderation={moderation.ui('avatar')} /> - <View style={styles.profileName}> - <View - style={[ - a.flex_row, - a.align_center, - a.justify_center, - web([a.flex_1]), - ]}> - <Text - emoji - style={[a.text_xs, a.leading_snug, a.self_start]} - numberOfLines={1}> - {name} - </Text> - {verification.showBadge && ( - <View style={[a.pl_xs]}> - <VerificationCheck - width={12} - verifier={verification.role === 'verifier'} - /> - </View> - )} - </View> + <View style={[a.flex_row, a.align_center, a.justify_center, a.w_full]}> + <Text emoji style={[a.text_xs, a.leading_snug]} numberOfLines={1}> + {name} + </Text> + {verification.showBadge && ( + <View style={[a.pl_2xs]}> + <VerificationCheck + width={10} + verifier={verification.role === 'verifier'} + /> + </View> + )} </View> </Link> - <Pressable - accessibilityRole="button" - accessibilityLabel={_(msg`Remove profile`)} - accessibilityHint={_(msg`Removes profile from search history`)} + <Button + label={_(msg`Remove profile`)} hitSlop={createHitslop(6)} - style={styles.profileRemoveBtn} - onPress={onRemove}> - <XIcon size="xs" style={t.atoms.text_contrast_low} /> - </Pressable> + size="tiny" + variant="outline" + color="secondary" + shape="round" + onPress={onRemove} + style={[ + a.absolute, + { + top: 0, + right: 0, + height: 18, + width: 18, + }, + ]}> + <ButtonIcon icon={XIcon} /> + </Button> </View> ) } - -const styles = StyleSheet.create({ - selectedProfilesContainer: { - marginTop: 10, - paddingHorizontal: 12, - height: 80, - }, - selectedProfilesContainerMobile: { - height: 100, - }, - profileItem: { - alignItems: 'center', - marginRight: 15, - width: 78, - }, - profileItemMobile: { - width: 70, - }, - profileName: { - width: 78, - marginTop: 6, - }, - profileRemoveBtn: { - position: 'absolute', - top: 0, - right: 5, - backgroundColor: 'white', - borderRadius: 10, - width: 18, - height: 18, - alignItems: 'center', - justifyContent: 'center', - }, -}) |