diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 90ac6acdcc..e954fd1c14 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -22,6 +22,7 @@ import {useLingui} from '@lingui/react' import AsyncStorage from '@react-native-async-storage/async-storage' import {useFocusEffect, useNavigation} from '@react-navigation/native' +import {LANGUAGES} from '#/lib/../locale/languages' import {useAnalytics} from '#/lib/analytics/analytics' import {createHitslop} from '#/lib/constants' import {HITSLOP_10} from '#/lib/constants' @@ -36,7 +37,6 @@ import { SearchTabNavigatorParams, } from '#/lib/routes/types' import {augmentSearchQuery} from '#/lib/strings/helpers' -import {LANGUAGES} from '#/locale/languages' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {listenSoftReset} from '#/state/events' @@ -61,13 +61,11 @@ import {Explore} from '#/view/screens/Search/Explore' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {atoms as a, useBreakpoints, useTheme as useThemeNew, web} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import * as Dialog from '#/components/Dialog' import * as FeedCard from '#/components/FeedCard' import * as TextField from '#/components/forms/TextField' import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron' import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' -import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {Text as NewText} from '#/components/Typography' @@ -411,14 +409,8 @@ function SearchLanguageDropdown({ ) } -let SearchScreenInner = ({ - queryWithoutLanguage, - queryWithLanguage, -}: { - query?: string - queryWithoutLanguage: string - queryWithLanguage: string -}): React.ReactNode => { +let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => { + const t = useThemeNew() const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() @@ -426,6 +418,14 @@ let SearchScreenInner = ({ const {isDesktop} = useWebMediaQueries() const [activeTab, setActiveTab] = React.useState(0) const {_} = useLingui() + const {gtMobile} = useBreakpoints() + + const {contentLanguages} = useLanguagePrefs() + const [language, setLanguage] = React.useState( + parseLanguageFromQuery(query || '') || contentLanguages[0], + ) + const queryWithoutLang = sanitizeLangFromQuery(query || '') + const queryWithLang = queryWithoutLang + ` lang:${language}` const onPageSelected = React.useCallback( (index: number) => { @@ -437,13 +437,13 @@ let SearchScreenInner = ({ ) const sections = React.useMemo(() => { - if (!queryWithoutLanguage) return [] + if (!queryWithoutLang) return [] return [ { title: _(msg`Top`), component: ( @@ -453,7 +453,7 @@ let SearchScreenInner = ({ title: _(msg`Latest`), component: ( @@ -463,7 +463,7 @@ let SearchScreenInner = ({ title: _(msg`People`), component: ( ), @@ -472,29 +472,49 @@ let SearchScreenInner = ({ title: _(msg`Feeds`), component: ( ), }, ] - }, [_, queryWithoutLanguage, queryWithLanguage, activeTab]) + }, [_, queryWithoutLang, queryWithLang, activeTab]) - return queryWithoutLanguage ? ( - ( - - section.title)} {...props} /> - - )} - initialPage={0}> - {sections.map((section, i) => ( - {section.component} - ))} - + return queryWithoutLang ? ( + <> + + + + Language: + + + + + + + + ( + + section.title)} {...props} /> + + )} + initialPage={0}> + {sections.map((section, i) => ( + {section.component} + ))} + + ) : hasSession ? ( ) : ( @@ -764,153 +784,95 @@ export function SearchScreen( [selectedProfiles], ) - const {contentLanguages} = useLanguagePrefs() - const [language, setLanguage] = React.useState( - parseLanguageFromQuery(queryParam || '') || contentLanguages[0], - ) - const queryWithoutLanguage = sanitizeLangFromQuery(queryParam || '') - const queryWithLanguage = queryWithoutLanguage + ` lang:${language}` - const control = Dialog.useDialogControl() - return ( - <> - - + + + {!gtMobile && ( + + )} + + {showAutocomplete && ( + + )} + - - - - Advanced search - - - For more tips and tricks, check out this blog post. - - - - - - - - - - - - - {!gtMobile && ( - - )} - - - - {showAutocomplete && ( - - )} - {searchText && !showAutocomplete && ( - - )} - - - - {searchText.length > 0 ? ( - - ) : ( - - )} - - - + {searchText.length > 0 ? ( + - + ) : ( + + )} - + + + + ) } @@ -935,7 +897,7 @@ let SearchInputBox = ({ const t = useThemeNew() return ( - +