robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
xan.lol
1import {View} from 'react-native'
2import {type AppBskyActorDefs} from '@atproto/api'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5
6import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
7import {sanitizePronouns} from '#/lib/strings/pronouns'
8import {type Shadow} from '#/state/cache/types'
9import {useShowLinkInHandle} from '#/state/preferences/show-link-in-handle.tsx'
10import {atoms as a, useTheme, web} from '#/alf'
11import {InlineLinkText} from '#/components/Link.tsx'
12import {NewskieDialog} from '#/components/NewskieDialog'
13import {Text} from '#/components/Typography'
14import {IS_IOS, IS_NATIVE} from '#/env'
15
16export function ProfileHeaderHandle({
17 profile,
18 disableTaps,
19}: {
20 profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
21 disableTaps?: boolean
22}) {
23 const t = useTheme()
24 const {_} = useLingui()
25 const invalidHandle = isInvalidHandle(profile.handle)
26 const pronouns = profile.pronouns
27 const isBskySocialHandle = profile.handle.endsWith('.bsky.social')
28 const showProfileInHandle = useShowLinkInHandle()
29 const sanitized = sanitizeHandle(
30 profile.handle,
31 '@',
32 // forceLTR handled by CSS above on web
33 IS_NATIVE,
34 )
35 return (
36 <View
37 style={[a.flex_row, a.gap_sm, a.align_center, {maxWidth: '100%'}]}
38 pointerEvents={disableTaps ? 'none' : IS_IOS ? 'auto' : 'box-none'}>
39 <NewskieDialog profile={profile} disabled={disableTaps} />
40 <View style={[a.flex_row, a.flex_wrap, {gap: 6}]}>
41 <Text
42 emoji
43 numberOfLines={1}
44 style={[
45 invalidHandle
46 ? [
47 a.border,
48 a.text_xs,
49 a.px_sm,
50 a.py_xs,
51 a.rounded_xs,
52 {borderColor: t.palette.contrast_200},
53 ]
54 : [a.text_md, a.leading_tight, t.atoms.text_contrast_medium],
55 web({
56 wordBreak: 'break-all',
57 direction: 'ltr',
58 unicodeBidi: 'isolate',
59 }),
60 ]}>
61 {invalidHandle ? (
62 _(msg`鈿營nvalid Handle`)
63 ) : showProfileInHandle && !isBskySocialHandle ? (
64 <InlineLinkText
65 to={`https://${profile.handle}`}
66 label={profile.handle}>
67 <Text style={[a.text_md, {color: t.palette.primary_500}]}>
68 {sanitized}
69 </Text>
70 </InlineLinkText>
71 ) : (
72 sanitized
73 )}
74 </Text>
75 {pronouns && (
76 <Text style={[t.atoms.text_contrast_low, a.text_md, a.leading_tight]}>
77 {sanitizePronouns(pronouns, IS_NATIVE)}
78 </Text>
79 )}
80 </View>
81 </View>
82 )
83}