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