mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {msg, Trans} from '@lingui/macro'
2import {useLingui} from '@lingui/react'
3
4import {HITSLOP_10} from '#/lib/constants'
5import {logger} from '#/logger'
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'
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 {_} = useLingui()
21 return (
22 <Menu.Root>
23 <Menu.Trigger label={_(msg`Thread options`)}>
24 {({props: {onPress, ...props}}) => (
25 <Button
26 label={_(msg`Thread options`)}
27 size="small"
28 variant="ghost"
29 color="secondary"
30 shape="round"
31 hitSlop={HITSLOP_10}
32 onPress={() => {
33 logger.metric('thread:click:headerMenuOpen', {})
34 onPress()
35 }}
36 {...props}>
37 <ButtonIcon icon={SettingsSlider} size="md" />
38 </Button>
39 )}
40 </Menu.Trigger>
41 <Menu.Outer>
42 <Menu.LabelText>
43 <Trans>Show replies as</Trans>
44 </Menu.LabelText>
45 <Menu.Group>
46 <Menu.Item
47 label={_(msg`Linear`)}
48 onPress={() => {
49 setView('linear')
50 }}>
51 <Menu.ItemText>
52 <Trans>Linear</Trans>
53 </Menu.ItemText>
54 <Menu.ItemRadio selected={view === 'linear'} />
55 </Menu.Item>
56 <Menu.Item
57 label={_(msg`Threaded`)}
58 onPress={() => {
59 setView('tree')
60 }}>
61 <Menu.ItemText>
62 <Trans>Threaded</Trans>
63 </Menu.ItemText>
64 <Menu.ItemRadio selected={view === 'tree'} />
65 </Menu.Item>
66 </Menu.Group>
67 <Menu.Divider />
68 <Menu.LabelText>
69 <Trans>Reply sorting</Trans>
70 </Menu.LabelText>
71 <Menu.Group>
72 <Menu.Item
73 label={_(msg`Top replies first`)}
74 onPress={() => {
75 setSort('top')
76 }}>
77 <Menu.ItemText>
78 <Trans>Top replies first</Trans>
79 </Menu.ItemText>
80 <Menu.ItemRadio selected={sort === 'top'} />
81 </Menu.Item>
82 <Menu.Item
83 label={_(msg`Oldest replies first`)}
84 onPress={() => {
85 setSort('oldest')
86 }}>
87 <Menu.ItemText>
88 <Trans>Oldest replies first</Trans>
89 </Menu.ItemText>
90 <Menu.ItemRadio selected={sort === 'oldest'} />
91 </Menu.Item>
92 <Menu.Item
93 label={_(msg`Newest replies first`)}
94 onPress={() => {
95 setSort('newest')
96 }}>
97 <Menu.ItemText>
98 <Trans>Newest replies first</Trans>
99 </Menu.ItemText>
100 <Menu.ItemRadio selected={sort === 'newest'} />
101 </Menu.Item>
102 </Menu.Group>
103 </Menu.Outer>
104 </Menu.Root>
105 )
106}