oppi.li
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 {logger} from '#/logger'
6import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
7import {type ThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'
8import {Button, ButtonIcon} from '#/components/Button'
9import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
10import * as Menu from '#/components/Menu'
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 {_} = useLingui()
22
23 const enableSquareButtons = useEnableSquareButtons()
24
25 return (
26 <Menu.Root>
27 <Menu.Trigger label={_(msg`Thread options`)}>
28 {({props: {onPress, ...props}}) => (
29 <Button
30 label={_(msg`Thread options`)}
31 size="small"
32 variant="ghost"
33 color="secondary"
34 shape={enableSquareButtons ? 'square' : 'round'}
35 hitSlop={HITSLOP_10}
36 onPress={() => {
37 logger.metric('thread:click:headerMenuOpen', {})
38 onPress()
39 }}
40 {...props}>
41 <ButtonIcon icon={SettingsSlider} size="md" />
42 </Button>
43 )}
44 </Menu.Trigger>
45 <Menu.Outer>
46 <Menu.LabelText>
47 <Trans>Show replies as</Trans>
48 </Menu.LabelText>
49 <Menu.Group>
50 <Menu.Item
51 label={_(msg`Linear`)}
52 onPress={() => {
53 setView('linear')
54 }}>
55 <Menu.ItemText>
56 <Trans>Linear</Trans>
57 </Menu.ItemText>
58 <Menu.ItemRadio selected={view === 'linear'} />
59 </Menu.Item>
60 <Menu.Item
61 label={_(msg`Threaded`)}
62 onPress={() => {
63 setView('tree')
64 }}>
65 <Menu.ItemText>
66 <Trans>Threaded</Trans>
67 </Menu.ItemText>
68 <Menu.ItemRadio selected={view === 'tree'} />
69 </Menu.Item>
70 </Menu.Group>
71 <Menu.Divider />
72 <Menu.LabelText>
73 <Trans>Reply sorting</Trans>
74 </Menu.LabelText>
75 <Menu.Group>
76 <Menu.Item
77 label={_(msg`Top replies first`)}
78 onPress={() => {
79 setSort('top')
80 }}>
81 <Menu.ItemText>
82 <Trans>Top replies first</Trans>
83 </Menu.ItemText>
84 <Menu.ItemRadio selected={sort === 'top'} />
85 </Menu.Item>
86 <Menu.Item
87 label={_(msg`Oldest replies first`)}
88 onPress={() => {
89 setSort('oldest')
90 }}>
91 <Menu.ItemText>
92 <Trans>Oldest replies first</Trans>
93 </Menu.ItemText>
94 <Menu.ItemRadio selected={sort === 'oldest'} />
95 </Menu.Item>
96 <Menu.Item
97 label={_(msg`Newest replies first`)}
98 onPress={() => {
99 setSort('newest')
100 }}>
101 <Menu.ItemText>
102 <Trans>Newest replies first</Trans>
103 </Menu.ItemText>
104 <Menu.ItemRadio selected={sort === 'newest'} />
105 </Menu.Item>
106 </Menu.Group>
107 </Menu.Outer>
108 </Menu.Root>
109 )
110}