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