Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {useCallback} from 'react'
2import {msg} from '@lingui/core/macro'
3import {useLingui} from '@lingui/react'
4import {useQueryClient} from '@tanstack/react-query'
5
6import {sanitizeAppLanguageSetting} from '#/locale/helpers'
7import {APP_LANGUAGES} from '#/locale/languages'
8import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
9import {resetPostsFeedQueries} from '#/state/queries/post-feed'
10import {atoms as a, platform, useTheme} from '#/alf'
11import * as Select from '#/components/Select'
12import {Button} from './Button'
13
14export function AppLanguageDropdown() {
15 const t = useTheme()
16 const {_} = useLingui()
17
18 const queryClient = useQueryClient()
19 const langPrefs = useLanguagePrefs()
20 const setLangPrefs = useLanguagePrefsApi()
21 const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
22
23 const onChangeAppLanguage = useCallback(
24 (value: string) => {
25 if (!value) return
26 if (sanitizedLang !== value) {
27 setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
28 }
29
30 // reset feeds to refetch content
31 resetPostsFeedQueries(queryClient)
32 },
33 [sanitizedLang, setLangPrefs, queryClient],
34 )
35
36 return (
37 <Select.Root
38 value={sanitizeAppLanguageSetting(langPrefs.appLanguage)}
39 onValueChange={onChangeAppLanguage}>
40 <Select.Trigger label={_(msg`Change app language`)}>
41 {({props}) => (
42 <Button
43 {...props}
44 label={props.accessibilityLabel}
45 size={platform({
46 web: 'tiny',
47 native: 'small',
48 })}
49 variant="ghost"
50 color="secondary"
51 shape="rectangular"
52 style={[
53 a.pr_xs,
54 a.pl_sm,
55 platform({
56 web: [{alignSelf: 'flex-start'}, a.gap_sm],
57 native: [a.gap_xs],
58 }),
59 ]}>
60 <Select.ValueText
61 placeholder={_(msg`Select an app language`)}
62 style={[t.atoms.text_contrast_medium]}
63 />
64 <Select.Icon style={[t.atoms.text_contrast_medium]} />
65 </Button>
66 )}
67 </Select.Trigger>
68 <Select.Content
69 label={_(msg`Select language`)}
70 renderItem={({label, value}) => (
71 <Select.Item value={value} label={label}>
72 <Select.ItemIndicator />
73 <Select.ItemText>{label}</Select.ItemText>
74 </Select.Item>
75 )}
76 items={APP_LANGUAGES.map(l => ({
77 label: l.name,
78 value: l.code2,
79 }))}
80 />
81 </Select.Root>
82 )
83}