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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,11 +19,12 @@ export function FromDropdown({
const {t: l} = useLingui()
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: '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 (
<Menu.Root>
@@ -45,19 +46,25 @@ export function FromDropdown({
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.LabelText>
<Trans>Filter by author</Trans>
</Menu.LabelText>
<Menu.Item
label={options[0].label}
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>
{options.map(option => (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
))}
{options.map((option, index) =>
index === 0 ? null : (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
),
)}
</Menu.Group>
</Menu.Outer>
</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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,16 +19,17 @@ export function MediaDropdown({
const {t: l} = useLingui()
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: 'video', label: l`Only posts with videos`},
]
const currentLabel =
options.find(o => o.value === value)?.label ?? l`All posts`
options.find(o => o.value === value)?.label ?? l`No media filter`
return (
<Menu.Root>
<Menu.Trigger label={l`Filter by media (currently: ${currentLabel})`}>
<Menu.Trigger
label={l`Filter search by media (currently: ${currentLabel})`}>
{({props}) => (
<Button
{...props}
@@ -46,19 +47,25 @@ export function MediaDropdown({
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.LabelText>
<Trans>Filter by media</Trans>
</Menu.LabelText>
<Menu.Item
label={options[0].label}
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>
{options.map(option => (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
))}
{options.map((option, index) =>
index === 0 ? null : (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
),
)}
</Menu.Group>
</Menu.Outer>
</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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -19,11 +19,12 @@ export function RepliesDropdown({
const {t: l} = useLingui()
const options: {value: RepliesFilter; label: string}[] = [
{value: 'all', label: l`Posts and replies`},
{value: 'none', label: l`No replies`},
{value: 'all', label: l`No post filter`},
{value: 'none', label: l`Only posts`},
{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 (
<Menu.Root>
@@ -46,19 +47,25 @@ export function RepliesDropdown({
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.LabelText>
<Trans>Include these results</Trans>
</Menu.LabelText>
<Menu.Item
label={options[0].label}
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>
{options.map(option => (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
))}
{options.map((option, index) =>
index === 0 ? null : (
<Menu.Item
key={option.value}
label={option.label}
onPress={() => onChange(option.value)}>
<Menu.ItemText>{option.label}</Menu.ItemText>
<Menu.ItemRadio selected={value === option.value} />
</Menu.Item>
),
)}
</Menu.Group>
</Menu.Outer>
</Menu.Root>
src/screens/Search/components/AdvancedSearchDialog/hooks.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export function useFilterFieldLabels(): Record<
message: 'These URLs',
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,
]}>
<Trans comment="Include search results with or without replies">
Include
Post type
</Trans>
</Text>
<View style={[a.flex_row]}>
@@ -406,7 +406,7 @@ function DialogInner({
a.mb_sm,
]}>
<Trans comment="Filter search results by a specific post author">
From
Author
</Trans>
</Text>
<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])
const currentLanguageLabel =
languages.find(lang => lang.value === value)?.label ?? l`All languages`
languages.find(lang => lang.value === value)?.label ?? l`No language filter`
return (
<Menu.Root>
@@ -88,12 +88,9 @@ export function SearchLanguageDropdown({
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.LabelText>
<Trans>Filter search by language</Trans>
</Menu.LabelText>
<Menu.Item label={l`All languages`} onPress={() => onChange('')}>
<Menu.Item label={l`No language filter`} onPress={() => onChange('')}>
<Menu.ItemText>
<Trans>All languages</Trans>
<Trans>No language filter</Trans>
</Menu.ItemText>
<Menu.ItemRadio selected={value === ''} />
</Menu.Item>