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