acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Tweak advanced search UI for better localization (#11266)

Browse Source
This commit is contained in:
DS Boyce
2026-07-24 10:40:37 -07:00
parent 7de608a482
commit 9d8b5e3575
6 changed files with 74 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Search/components/AdvancedSearchDialog/FromDropdown.tsx
+22 -15
View File
@@ -1,4 +1,4 @@
import {Trans, useLingui} from '@lingui/react/macro' import {useLingui} from '@lingui/react/macro'
import {platform} from '#/alf' import {platform} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,11 +19,12 @@ export function FromDropdown({
const {t: l} = useLingui() const {t: l} = useLingui()
const options: {value: FromFilter; label: string}[] = [ const options: {value: FromFilter; label: string}[] = [
{value: 'anyone', label: l`Anyone`}, {value: 'anyone', label: l`No author filter`},
{value: 'following', label: l`People I follow`}, {value: 'following', label: l`People I follow`},
{value: 'me', label: l`Me`}, {value: 'me', label: l`Me`},
] ]
const currentLabel = options.find(o => o.value === value)?.label ?? l`Anyone` const currentLabel =
options.find(o => o.value === value)?.label ?? l`No author filter`
return ( return (
<Menu.Root> <Menu.Root>
@@ -45,19 +46,25 @@ export function FromDropdown({
)} )}
</Menu.Trigger> </Menu.Trigger>
<Menu.Outer> <Menu.Outer>
<Menu.LabelText> <Menu.Item
<Trans>Filter by author</Trans> label={options[0].label}
</Menu.LabelText> onPress={() => onChange(options[0].value)}>
<Menu.ItemText>{options[0].label}</Menu.ItemText>
<Menu.ItemRadio selected={value === options[0].value} />
</Menu.Item>
<Menu.Divider />
<Menu.Group> <Menu.Group>
{options.map(option => ( {options.map((option, index) =>
<Menu.Item index === 0 ? null : (
key={option.value} <Menu.Item
label={option.label} key={option.value}
onPress={() => onChange(option.value)}> label={option.label}
<Menu.ItemText>{option.label}</Menu.ItemText> onPress={() => onChange(option.value)}>
<Menu.ItemRadio selected={value === option.value} /> <Menu.ItemText>{option.label}</Menu.ItemText>
</Menu.Item> <Menu.ItemRadio selected={value === option.value} />
))} </Menu.Item>
),
)}
</Menu.Group> </Menu.Group>
</Menu.Outer> </Menu.Outer>
</Menu.Root> </Menu.Root>
src/screens/Search/components/AdvancedSearchDialog/MediaDropdown.tsx
+23 -16
View File
@@ -1,4 +1,4 @@
import {Trans, useLingui} from '@lingui/react/macro' import {useLingui} from '@lingui/react/macro'
import {platform} from '#/alf' import {platform} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,16 +19,17 @@ export function MediaDropdown({
const {t: l} = useLingui() const {t: l} = useLingui()
const options: {value: MediaFilter; label: string}[] = [ const options: {value: MediaFilter; label: string}[] = [
{value: 'all', label: l`All posts`}, {value: 'all', label: l`No media filter`},
{value: 'media', label: l`Only posts with media`}, {value: 'media', label: l`Only posts with media`},
{value: 'video', label: l`Only posts with videos`}, {value: 'video', label: l`Only posts with videos`},
] ]
const currentLabel = const currentLabel =
options.find(o => o.value === value)?.label ?? l`All posts` options.find(o => o.value === value)?.label ?? l`No media filter`
return ( return (
<Menu.Root> <Menu.Root>
<Menu.Trigger label={l`Filter by media (currently: ${currentLabel})`}> <Menu.Trigger
label={l`Filter search by media (currently: ${currentLabel})`}>
{({props}) => ( {({props}) => (
<Button <Button
{...props} {...props}
@@ -46,19 +47,25 @@ export function MediaDropdown({
)} )}
</Menu.Trigger> </Menu.Trigger>
<Menu.Outer> <Menu.Outer>
<Menu.LabelText> <Menu.Item
<Trans>Filter by media</Trans> label={options[0].label}
</Menu.LabelText> onPress={() => onChange(options[0].value)}>
<Menu.ItemText>{options[0].label}</Menu.ItemText>
<Menu.ItemRadio selected={value === options[0].value} />
</Menu.Item>
<Menu.Divider />
<Menu.Group> <Menu.Group>
{options.map(option => ( {options.map((option, index) =>
<Menu.Item index === 0 ? null : (
key={option.value} <Menu.Item
label={option.label} key={option.value}
onPress={() => onChange(option.value)}> label={option.label}
<Menu.ItemText>{option.label}</Menu.ItemText> onPress={() => onChange(option.value)}>
<Menu.ItemRadio selected={value === option.value} /> <Menu.ItemText>{option.label}</Menu.ItemText>
</Menu.Item> <Menu.ItemRadio selected={value === option.value} />
))} </Menu.Item>
),
)}
</Menu.Group> </Menu.Group>
</Menu.Outer> </Menu.Outer>
</Menu.Root> </Menu.Root>
src/screens/Search/components/AdvancedSearchDialog/RepliesDropdown.tsx
+23 -16
View File
@@ -1,4 +1,4 @@
import {Trans, useLingui} from '@lingui/react/macro' import {useLingui} from '@lingui/react/macro'
import {platform} from '#/alf' import {platform} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,11 +19,12 @@ export function RepliesDropdown({
const {t: l} = useLingui() const {t: l} = useLingui()
const options: {value: RepliesFilter; label: string}[] = [ const options: {value: RepliesFilter; label: string}[] = [
{value: 'all', label: l`Posts and replies`}, {value: 'all', label: l`No post filter`},
{value: 'none', label: l`No replies`}, {value: 'none', label: l`Only posts`},
{value: 'only', label: l`Only replies`}, {value: 'only', label: l`Only replies`},
] ]
const currentLabel = options.find(o => o.value === value)?.label ?? l`All` const currentLabel =
options.find(o => o.value === value)?.label ?? l`No post filter`
return ( return (
<Menu.Root> <Menu.Root>
@@ -46,19 +47,25 @@ export function RepliesDropdown({
)} )}
</Menu.Trigger> </Menu.Trigger>
<Menu.Outer> <Menu.Outer>
<Menu.LabelText> <Menu.Item
<Trans>Include these results</Trans> label={options[0].label}
</Menu.LabelText> onPress={() => onChange(options[0].value)}>
<Menu.ItemText>{options[0].label}</Menu.ItemText>
<Menu.ItemRadio selected={value === options[0].value} />
</Menu.Item>
<Menu.Divider />
<Menu.Group> <Menu.Group>
{options.map(option => ( {options.map((option, index) =>
<Menu.Item index === 0 ? null : (
key={option.value} <Menu.Item
label={option.label} key={option.value}
onPress={() => onChange(option.value)}> label={option.label}
<Menu.ItemText>{option.label}</Menu.ItemText> onPress={() => onChange(option.value)}>
<Menu.ItemRadio selected={value === option.value} /> <Menu.ItemText>{option.label}</Menu.ItemText>
</Menu.Item> <Menu.ItemRadio selected={value === option.value} />
))} </Menu.Item>
),
)}
</Menu.Group> </Menu.Group>
</Menu.Outer> </Menu.Outer>
</Menu.Root> </Menu.Root>
src/screens/Search/components/AdvancedSearchDialog/hooks.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export function useFilterFieldLabels(): Record<
message: 'These URLs', message: 'These URLs',
comment: 'Advanced search filter', comment: 'Advanced search filter',
}), }),
label: 'bsky.app atproto.com', label: 'https://bsky.app https://atproto.com',
}, },
} }
} }
src/screens/Search/components/AdvancedSearchDialog/index.tsx
+2 -2
View File
@@ -390,7 +390,7 @@ function DialogInner({
a.mb_sm, a.mb_sm,
]}> ]}>
<Trans comment="Include search results with or without replies"> <Trans comment="Include search results with or without replies">
Include Post type
</Trans> </Trans>
</Text> </Text>
<View style={[a.flex_row]}> <View style={[a.flex_row]}>
@@ -406,7 +406,7 @@ function DialogInner({
a.mb_sm, a.mb_sm,
]}> ]}>
<Trans comment="Filter search results by a specific post author"> <Trans comment="Filter search results by a specific post author">
From Author
</Trans> </Trans>
</Text> </Text>
<View style={[a.flex_row]}> <View style={[a.flex_row]}>
src/screens/Search/components/SearchLanguageDropdown.tsx
+3 -6
View File
@@ -62,7 +62,7 @@ export function SearchLanguageDropdown({
}, [appLanguage, contentLanguages, primaryLanguage]) }, [appLanguage, contentLanguages, primaryLanguage])
const currentLanguageLabel = const currentLanguageLabel =
languages.find(lang => lang.value === value)?.label ?? l`All languages` languages.find(lang => lang.value === value)?.label ?? l`No language filter`
return ( return (
<Menu.Root> <Menu.Root>
@@ -88,12 +88,9 @@ export function SearchLanguageDropdown({
)} )}
</Menu.Trigger> </Menu.Trigger>
<Menu.Outer> <Menu.Outer>
<Menu.LabelText> <Menu.Item label={l`No language filter`} onPress={() => onChange('')}>
<Trans>Filter search by language</Trans>
</Menu.LabelText>
<Menu.Item label={l`All languages`} onPress={() => onChange('')}>
<Menu.ItemText> <Menu.ItemText>
<Trans>All languages</Trans> <Trans>No language filter</Trans>
</Menu.ItemText> </Menu.ItemText>
<Menu.ItemRadio selected={value === ''} /> <Menu.ItemRadio selected={value === ''} />
</Menu.Item> </Menu.Item>