forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
feat: link to website for handles (#43)
authored by
Sylfr Serenity Tan
and committed by
GitHub
5251d999
2c434cda
+116
-26
+19
-3
src/screens/Profile/Header/Handle.tsx
+19
-3
src/screens/Profile/Header/Handle.tsx
···
1
1
import {View} from 'react-native'
2
-
import {AppBskyActorDefs} from '@atproto/api'
2
+
import {type AppBskyActorDefs} from '@atproto/api'
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
6
import {isInvalidHandle} from '#/lib/strings/handles'
7
7
import {isIOS} from '#/platform/detection'
8
-
import {Shadow} from '#/state/cache/types'
8
+
import {type Shadow} from '#/state/cache/types'
9
+
import {useShowLinkInHandle} from '#/state/preferences/show-link-in-handle.tsx'
9
10
import {atoms as a, useTheme, web} from '#/alf'
11
+
import {InlineLinkText} from '#/components/Link.tsx'
10
12
import {NewskieDialog} from '#/components/NewskieDialog'
11
13
import {Text} from '#/components/Typography'
12
14
···
21
23
const {_} = useLingui()
22
24
const invalidHandle = isInvalidHandle(profile.handle)
23
25
const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
26
+
const isBskySocialHandle = profile.handle.endsWith('.bsky.social')
27
+
const showProfileInHandle = useShowLinkInHandle()
24
28
return (
25
29
<View
26
30
style={[a.flex_row, a.gap_xs, a.align_center, {maxWidth: '100%'}]}
···
49
53
: [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
50
54
web({wordBreak: 'break-all'}),
51
55
]}>
52
-
{invalidHandle ? _(msg`⚠Invalid Handle`) : `@${profile.handle}`}
56
+
{invalidHandle ? (
57
+
_(msg`⚠Invalid Handle`)
58
+
) : showProfileInHandle && !isBskySocialHandle ? (
59
+
<InlineLinkText
60
+
to={`https://${profile.handle}`}
61
+
label={profile.handle}>
62
+
<Text style={[a.text_md, {color: t.palette.primary_500}]}>
63
+
@{profile.handle}
64
+
</Text>
65
+
</InlineLinkText>
66
+
) : (
67
+
`@${profile.handle}`
68
+
)}
53
69
</Text>
54
70
</View>
55
71
)
+22
src/screens/Settings/DeerSettings.tsx
+22
src/screens/Settings/DeerSettings.tsx
···
51
51
useRepostCarouselEnabled,
52
52
useSetRepostCarouselEnabled,
53
53
} from '#/state/preferences/repost-carousel-enabled'
54
+
import {
55
+
useSetShowLinkInHandle,
56
+
useShowLinkInHandle,
57
+
} from '#/state/preferences/show-link-in-handle.tsx'
54
58
import {useProfilesQuery} from '#/state/queries/profile'
55
59
import * as SettingsList from '#/screens/Settings/components/SettingsList'
56
60
import {atoms as a, useBreakpoints} from '#/alf'
···
271
275
const repostCarouselEnabled = useRepostCarouselEnabled()
272
276
const setRepostCarouselEnabled = useSetRepostCarouselEnabled()
273
277
278
+
const showLinkInHandle = useShowLinkInHandle()
279
+
const setShowLinkInHandle = useSetShowLinkInHandle()
280
+
274
281
const [gates, setGatesView] = useState(Object.fromEntries(useGatesCache()))
275
282
const dangerousSetGate = useDangerousSetGate()
276
283
const setGate = (gate: Gate, value: boolean) => {
···
496
503
style={[a.w_full]}>
497
504
<Toggle.LabelText style={[a.flex_1]}>
498
505
<Trans>Do not fall back to discover feed</Trans>
506
+
</Toggle.LabelText>
507
+
<Toggle.Platform />
508
+
</Toggle.Item>
509
+
<Toggle.Item
510
+
name="show_link_in_handle"
511
+
label={_(
512
+
msg`On non-bsky.social handles, show a link to that URL`,
513
+
)}
514
+
value={showLinkInHandle}
515
+
onChange={value => setShowLinkInHandle(value)}
516
+
style={[a.w_full]}>
517
+
<Toggle.LabelText style={[a.flex_1]}>
518
+
<Trans>
519
+
On non-bsky.social handles, show a link to that URL
520
+
</Trans>
499
521
</Toggle.LabelText>
500
522
<Toggle.Platform />
501
523
</Toggle.Item>
+2
src/state/persisted/schema.ts
+2
src/state/persisted/schema.ts
···
133
133
repostCarouselEnabled: z.boolean().optional(),
134
134
hideFollowNotifications: z.boolean().optional(),
135
135
constellationInstance: z.string().optional(),
136
+
showLinkInHandle: z.boolean().optional(),
136
137
deerVerification: z
137
138
.object({
138
139
enabled: z.boolean(),
···
201
202
repostCarouselEnabled: false,
202
203
hideFollowNotifications: false,
203
204
constellationInstance: 'https://constellation.microcosm.blue/',
205
+
showLinkInHandle: false,
204
206
deerVerification: {
205
207
enabled: false,
206
208
// https://deer.social/profile/did:plc:p2cp5gopk7mgjegy6wadk3ep/post/3lndyqyyr4k2k
+26
-23
src/state/preferences/index.tsx
+26
-23
src/state/preferences/index.tsx
···
18
18
import {Provider as NoAppLabelersProvider} from './no-app-labelers'
19
19
import {Provider as NoDiscoverProvider} from './no-discover-fallback'
20
20
import {Provider as RepostCarouselProvider} from './repost-carousel-enabled'
21
+
import {Provider as ShowLinkInHandleProvider} from './show-link-in-handle'
21
22
import {Provider as SubtitlesProvider} from './subtitles'
22
23
import {Provider as TrendingSettingsProvider} from './trending'
23
24
import {Provider as UsedStarterPacksProvider} from './used-starter-packs'
···
50
51
<ConstellationInstanceProvider>
51
52
<DeerVerificationProvider>
52
53
<NoDiscoverProvider>
53
-
<LargeAltBadgeProvider>
54
-
<ExternalEmbedsProvider>
55
-
<HiddenPostsProvider>
56
-
<InAppBrowserProvider>
57
-
<DisableHapticsProvider>
58
-
<AutoplayProvider>
59
-
<UsedStarterPacksProvider>
60
-
<SubtitlesProvider>
61
-
<TrendingSettingsProvider>
62
-
<RepostCarouselProvider>
63
-
<KawaiiProvider>
64
-
{children}
65
-
</KawaiiProvider>
66
-
</RepostCarouselProvider>
67
-
</TrendingSettingsProvider>
68
-
</SubtitlesProvider>
69
-
</UsedStarterPacksProvider>
70
-
</AutoplayProvider>
71
-
</DisableHapticsProvider>
72
-
</InAppBrowserProvider>
73
-
</HiddenPostsProvider>
74
-
</ExternalEmbedsProvider>
75
-
</LargeAltBadgeProvider>
54
+
<ShowLinkInHandleProvider>
55
+
<LargeAltBadgeProvider>
56
+
<ExternalEmbedsProvider>
57
+
<HiddenPostsProvider>
58
+
<InAppBrowserProvider>
59
+
<DisableHapticsProvider>
60
+
<AutoplayProvider>
61
+
<UsedStarterPacksProvider>
62
+
<SubtitlesProvider>
63
+
<TrendingSettingsProvider>
64
+
<RepostCarouselProvider>
65
+
<KawaiiProvider>
66
+
{children}
67
+
</KawaiiProvider>
68
+
</RepostCarouselProvider>
69
+
</TrendingSettingsProvider>
70
+
</SubtitlesProvider>
71
+
</UsedStarterPacksProvider>
72
+
</AutoplayProvider>
73
+
</DisableHapticsProvider>
74
+
</InAppBrowserProvider>
75
+
</HiddenPostsProvider>
76
+
</ExternalEmbedsProvider>
77
+
</LargeAltBadgeProvider>
78
+
</ShowLinkInHandleProvider>
76
79
</NoDiscoverProvider>
77
80
</DeerVerificationProvider>
78
81
</ConstellationInstanceProvider>
+47
src/state/preferences/show-link-in-handle.tsx
+47
src/state/preferences/show-link-in-handle.tsx
···
1
+
import React from 'react'
2
+
3
+
import * as persisted from '#/state/persisted'
4
+
5
+
type StateContext = persisted.Schema['showLinkInHandle']
6
+
type SetContext = (v: persisted.Schema['showLinkInHandle']) => void
7
+
8
+
const stateContext = React.createContext<StateContext>(
9
+
persisted.defaults.showLinkInHandle,
10
+
)
11
+
const setContext = React.createContext<SetContext>(
12
+
(_: persisted.Schema['showLinkInHandle']) => {},
13
+
)
14
+
15
+
export function Provider({children}: React.PropsWithChildren<{}>) {
16
+
const [state, setState] = React.useState(persisted.get('showLinkInHandle'))
17
+
18
+
const setStateWrapped = React.useCallback(
19
+
(showLinkInHandle: persisted.Schema['showLinkInHandle']) => {
20
+
setState(showLinkInHandle)
21
+
persisted.write('showLinkInHandle', showLinkInHandle)
22
+
},
23
+
[setState],
24
+
)
25
+
26
+
React.useEffect(() => {
27
+
return persisted.onUpdate('showLinkInHandle', nextShowLinkInHandle => {
28
+
setState(nextShowLinkInHandle)
29
+
})
30
+
}, [setStateWrapped])
31
+
32
+
return (
33
+
<stateContext.Provider value={state}>
34
+
<setContext.Provider value={setStateWrapped}>
35
+
{children}
36
+
</setContext.Provider>
37
+
</stateContext.Provider>
38
+
)
39
+
}
40
+
41
+
export function useShowLinkInHandle() {
42
+
return React.useContext(stateContext)
43
+
}
44
+
45
+
export function useSetShowLinkInHandle() {
46
+
return React.useContext(setContext)
47
+
}