Add language filtering UI to search #5459
Conversation
|
This reverts commit 257573c.
arcalinea
temporarily deployed
to
search-lang - social-app PR #5459
Render
Destroyed
|
I just tried it on the preview branch, very nice 👌 One minor point to mention (that is not in any way caused by this PR, of course): having languages in the dropdown does highlight that some are repeated, e.g. French and German, which seems to be the issue referred to in #4314
|
|
@surfdude29 yeah we have some work we need to do here sometime. It's complicated by the fact that users have these values stored. So if we remove any, we need to remap old values to new values, among other things. Need to give it some thought, but it's on my list. Thanks for the bump! |
arcalinea
temporarily deployed
to
search-lang - social-app PR #5459
Render
Destroyed
| @@ -349,7 +491,7 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => { | |||
| title: _(msg`Top`), | |||
| component: ( | |||
| <SearchScreenPostResults | |||
| query={query} | |||
| query={queryWithParams} | |||
There was a problem hiding this comment.
Post queries can have params like lang, but profiles and feeds don't support these and will return nothing. So those are passed the raw query without params.
| @@ -32,7 +32,7 @@ export function Forms() { | |||
| label="Text field" | |||
| /> | |||
|
|
|||
| <View style={[a.flex_row, a.gap_sm]}> | |||
| <View style={[a.flex_row, a.align_start, a.gap_sm]}> | |||
There was a problem hiding this comment.
Prevents stretching, just for testing cross-platform
| <TextField.Root> | ||
| <TextField.Icon icon={MagnifyingGlass} /> | ||
| <TextField.Input | ||
| inputRef={textInput} | ||
| label={_(msg`Search`)} | ||
| value={searchText} | ||
| placeholder={_(msg`Search`)} | ||
| returnKeyType="search" | ||
| onChangeText={onChangeText} | ||
| onSubmitEditing={onSubmit} | ||
| onFocus={onFocus} | ||
| keyboardAppearance={t.scheme} | ||
| selectTextOnFocus={isNative} | ||
| autoFocus={false} | ||
| accessibilityRole="search" | ||
| autoCorrect={false} | ||
| autoComplete="off" | ||
| autoCapitalize="none" | ||
| /> | ||
| </TextField.Root> |
There was a problem hiding this comment.
Very small question here that can be addressed separately, do we want to extract this out to our SearchBox (I think that's what it is called...) so we can use it in the right nav on web? Maybe with a configurable size since this might be too big for the sidebar. Just a thought.
There was a problem hiding this comment.
Yeah that'd be cool. With the autocomplete and the operator hints we mentioned.
arcalinea
temporarily deployed
to
search-lang - social-app PR #5459
Render
Destroyed
* origin/main: Adjust line height to not cut off emoji (#5496) Emoji in account list (#5497) Make the counter more rounded (#5083) add emoji prop to composer reply to text (#5495) Fix banner height in edit profile modal (#5494) Messages list - make avatars link to profile (#5484) Add back empty placeholder (#5489) Filter errors that get sent to Sentry (#5247) Add language filtering UI to search (#5459)
Adds language filtering to the search interface. Works like this:
lang:*param exists, it uses that, otherwise defaults to the user's firstcontentLanguages[]stringAlso replaces basically the whole header section on the search screen. Functionality remains the same, except that when pressing "Cancel" it clears the search query as well. This felt like a bug to me with the existing handling.
Had to touch
TextFieldin order to adjust its sizing to match new button sizing and keep alignment looking good. You can see the alignment on the search screen on mobile, or just check out the storybook.Web
iOS
Android