forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {msg, Trans} from '@lingui/macro'
2import {useLingui} from '@lingui/react'
3
4import {HITSLOP_10} from '#/lib/constants'
5import {type ThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'
6import {Button, ButtonIcon} from '#/components/Button'
7import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
8import * as Menu from '#/components/Menu'
9import {useAnalytics} from '#/analytics'
10
11export function HeaderDropdown({
12 sort,
13 view,
14 setSort,
15 setView,
16}: Pick<
17 ThreadPreferences,
18 'sort' | 'setSort' | 'view' | 'setView'
19>): React.ReactNode {
20 const ax = useAnalytics()
21 const {_} = useLingui()
22 return (
23 <Menu.Root>
24 <Menu.Trigger label={_(msg`Thread options`)}>
25 {({props: {onPress, ...props}}) => (
26 <Button
27 label={_(msg`Thread options`)}
28 size="small"
29 variant="ghost"
30 color="secondary"
31 shape="round"
32 hitSlop={HITSLOP_10}
33 onPress={() => {
34 ax.metric('thread:click:headerMenuOpen', {})
35 onPress()
36 }}
37 {...props}>
38 <ButtonIcon icon={SettingsSlider} size="md" />
39 </Button>
40 )}
41 </Menu.Trigger>
42 <Menu.Outer>
43 <Menu.LabelText>
44 <Trans>Show replies as</Trans>
45 </Menu.LabelText>
46 <Menu.Group>
47 <Menu.Item
48 label={_(msg`Linear`)}
49 onPress={() => {
50 setView('linear')
51 }}>
52 <Menu.ItemText>
53 <Trans>Linear</Trans>
54 </Menu.ItemText>
55 <Menu.ItemRadio selected={view === 'linear'} />
56 </Menu.Item>
57 <Menu.Item
58 label={_(msg`Threaded`)}
59 onPress={() => {
60 setView('tree')
61 }}>
62 <Menu.ItemText>
63 <Trans>Threaded</Trans>
64 </Menu.ItemText>
65 <Menu.ItemRadio selected={view === 'tree'} />
66 </Menu.Item>
67 </Menu.Group>
68 <Menu.Divider />
69 <Menu.LabelText>
70 <Trans>Reply sorting</Trans>
71 </Menu.LabelText>
72 <Menu.Group>
73 <Menu.Item
74 label={_(msg`Top replies first`)}
75 onPress={() => {
76 setSort('top')
77 }}>
78 <Menu.ItemText>
79 <Trans>Top replies first</Trans>
80 </Menu.ItemText>
81 <Menu.ItemRadio selected={sort === 'top'} />
82 </Menu.Item>
83 <Menu.Item
84 label={_(msg`Oldest replies first`)}
85 onPress={() => {
86 setSort('oldest')
87 }}>
88 <Menu.ItemText>
89 <Trans>Oldest replies first</Trans>
90 </Menu.ItemText>
91 <Menu.ItemRadio selected={sort === 'oldest'} />
92 </Menu.Item>
93 <Menu.Item
94 label={_(msg`Newest replies first`)}
95 onPress={() => {
96 setSort('newest')
97 }}>
98 <Menu.ItemText>
99 <Trans>Newest replies first</Trans>
100 </Menu.ItemText>
101 <Menu.ItemRadio selected={sort === 'newest'} />
102 </Menu.Item>
103 </Menu.Group>
104 </Menu.Outer>
105 </Menu.Root>
106 )
107}