Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
3.4 kB · 111 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import {msg, Trans} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {HITSLOP_10} from '#/lib/constants'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'import {type ThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'import {Button, ButtonIcon} from '#/components/Button'import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'import * as Menu from '#/components/Menu'import {useAnalytics} from '#/analytics'
export function HeaderDropdown({ sort, view, setSort, setView,}: Pick< ThreadPreferences, 'sort' | 'setSort' | 'view' | 'setView'>): React.ReactNode { const ax = useAnalytics() const {_} = useLingui()
const enableSquareButtons = useEnableSquareButtons()
return ( <Menu.Root> <Menu.Trigger label={_(msg`Thread options`)}> {({props: {onPress, ...props}}) => ( <Button label={_(msg`Thread options`)} size="small" variant="ghost" color="secondary" shape={enableSquareButtons ? 'square' : 'round'} hitSlop={HITSLOP_10} onPress={() => { ax.metric('thread:click:headerMenuOpen', {}) onPress() }} {...props}> <ButtonIcon icon={SettingsSlider} size="md" /> </Button> )} </Menu.Trigger> <Menu.Outer> <Menu.LabelText> <Trans>Show replies as</Trans> </Menu.LabelText> <Menu.Group> <Menu.Item label={_(msg`Linear`)} onPress={() => { setView('linear') }}> <Menu.ItemText> <Trans>Linear</Trans> </Menu.ItemText> <Menu.ItemRadio selected={view === 'linear'} /> </Menu.Item> <Menu.Item label={_(msg`Threaded`)} onPress={() => { setView('tree') }}> <Menu.ItemText> <Trans>Threaded</Trans> </Menu.ItemText> <Menu.ItemRadio selected={view === 'tree'} /> </Menu.Item> </Menu.Group> <Menu.Divider /> <Menu.LabelText> <Trans>Reply sorting</Trans> </Menu.LabelText> <Menu.Group> <Menu.Item label={_(msg`Top replies first`)} onPress={() => { setSort('top') }}> <Menu.ItemText> <Trans>Top replies first</Trans> </Menu.ItemText> <Menu.ItemRadio selected={sort === 'top'} /> </Menu.Item> <Menu.Item label={_(msg`Oldest replies first`)} onPress={() => { setSort('oldest') }}> <Menu.ItemText> <Trans>Oldest replies first</Trans> </Menu.ItemText> <Menu.ItemRadio selected={sort === 'oldest'} /> </Menu.Item> <Menu.Item label={_(msg`Newest replies first`)} onPress={() => { setSort('newest') }}> <Menu.ItemText> <Trans>Newest replies first</Trans> </Menu.ItemText> <Menu.ItemRadio selected={sort === 'newest'} /> </Menu.Item> </Menu.Group> </Menu.Outer> </Menu.Root> )}