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