Mobile Web (#427)

* WIP

* WIP

* Fix header offset on web

* Remove debug

* Fix web mobile feed and FAB layout

* Fix modals on mobile web

* Remove dead code

* Remove ios config that shouldnt be committed now

* Move bottom bar into its own folder

* Fix web drawer navigation and state behaviors

* Remove dark mode toggle from web drawer for now

* Fix search on mobile web

* Fix the logged out splash screen on mobile web

* Fixes to detox simulator

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/screens/Home.tsx

@@ -11,14 +11,15 @@ import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
 import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {FAB} from '../com/util/FAB'
+import {FAB} from '../com/util/fab/FAB'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
+import {isDesktopWeb, isMobileWeb} from 'platform/detection'
 
-const HEADER_OFFSET = 40
+const HEADER_OFFSET = isDesktopWeb ? 0 : isMobileWeb ? 20 : 40
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired((_opts: Props) => {

src/view/screens/Profile.tsx

@@ -16,7 +16,7 @@ import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 import {EmptyState} from '../com/util/EmptyState'
 import {Text} from '../com/util/text/Text'
-import {FAB} from '../com/util/FAB'
+import {FAB} from '../com/util/fab/FAB'
 import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'

src/view/screens/Search.web.tsx

@@ -15,12 +15,15 @@ import {
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
+import * as Mobile from './SearchMobile'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
 export const SearchScreen = withAuthRequired(
-  observer(({route}: Props) => {
+  observer(({navigation, route}: Props) => {
     const pal = usePalette('default')
     const store = useStores()
+    const params = route.params || {}
     const foafs = React.useMemo<FoafsModel>(
       () => new FoafsModel(store),
       [store],
@@ -30,13 +33,13 @@ export const SearchScreen = withAuthRequired(
       [store],
     )
     const searchUIModel = React.useMemo<SearchUIModel | undefined>(
-      () => (route.params.q ? new SearchUIModel(store) : undefined),
-      [route.params.q, store],
+      () => (params.q ? new SearchUIModel(store) : undefined),
+      [params.q, store],
     )
 
     React.useEffect(() => {
-      if (route.params.q && searchUIModel) {
-        searchUIModel.fetch(route.params.q)
+      if (params.q && searchUIModel) {
+        searchUIModel.fetch(params.q)
       }
       if (!foafs.hasData) {
         foafs.fetch()
@@ -44,12 +47,18 @@ export const SearchScreen = withAuthRequired(
       if (!suggestedActors.hasLoaded) {
         suggestedActors.loadMore(true)
       }
-    }, [foafs, suggestedActors, searchUIModel, route.params.q])
+    }, [foafs, suggestedActors, searchUIModel, params.q])
 
     if (searchUIModel) {
       return <SearchResults model={searchUIModel} />
     }
 
+    const {isDesktop} = useWebMediaQueries()
+
+    if (!isDesktop) {
+      return <Mobile.SearchScreen navigation={navigation} route={route} />
+    }
+
     return (
       <ScrollView
         testID="searchScrollView"

src/view/screens/SearchMobile.tsx

@@ -0,0 +1,195 @@
+import React from 'react'
+import {
+  Keyboard,
+  RefreshControl,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ScrollView} from 'view/com/util/Views'
+import {
+  NativeStackScreenProps,
+  SearchTabNavigatorParams,
+} from 'lib/routes/types'
+import {observer} from 'mobx-react-lite'
+import {Text} from 'view/com/util/text/Text'
+import {useStores} from 'state/index'
+import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
+import {SearchUIModel} from 'state/models/ui/search'
+import {FoafsModel} from 'state/models/discovery/foafs'
+import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors'
+import {HeaderWithInput} from 'view/com/search/HeaderWithInput'
+import {Suggestions} from 'view/com/search/Suggestions'
+import {SearchResults} from 'view/com/search/SearchResults'
+import {s} from 'lib/styles'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
+
+type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
+export const SearchScreen = withAuthRequired(
+  observer<Props>(({}: Props) => {
+    const pal = usePalette('default')
+    const store = useStores()
+    const scrollElRef = React.useRef<ScrollView>(null)
+    const onMainScroll = useOnMainScroll(store)
+    const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
+    const [query, setQuery] = React.useState<string>('')
+    const autocompleteView = React.useMemo<UserAutocompleteModel>(
+      () => new UserAutocompleteModel(store),
+      [store],
+    )
+    const foafs = React.useMemo<FoafsModel>(
+      () => new FoafsModel(store),
+      [store],
+    )
+    const suggestedActors = React.useMemo<SuggestedActorsModel>(
+      () => new SuggestedActorsModel(store),
+      [store],
+    )
+    const [searchUIModel, setSearchUIModel] = React.useState<
+      SearchUIModel | undefined
+    >()
+    const [refreshing, setRefreshing] = React.useState(false)
+
+    const onSoftReset = () => {
+      scrollElRef.current?.scrollTo({x: 0, y: 0})
+    }
+
+    useFocusEffect(
+      React.useCallback(() => {
+        const softResetSub = store.onScreenSoftReset(onSoftReset)
+        const cleanup = () => {
+          softResetSub.remove()
+        }
+
+        store.shell.setMinimalShellMode(false)
+        autocompleteView.setup()
+        if (!foafs.hasData) {
+          foafs.fetch()
+        }
+        if (!suggestedActors.hasLoaded) {
+          suggestedActors.loadMore(true)
+        }
+
+        return cleanup
+      }, [store, autocompleteView, foafs, suggestedActors]),
+    )
+
+    const onChangeQuery = React.useCallback(
+      (text: string) => {
+        setQuery(text)
+        if (text.length > 0) {
+          autocompleteView.setActive(true)
+          autocompleteView.setPrefix(text)
+        } else {
+          autocompleteView.setActive(false)
+        }
+      },
+      [setQuery, autocompleteView],
+    )
+
+    const onPressClearQuery = React.useCallback(() => {
+      setQuery('')
+    }, [setQuery])
+
+    const onPressCancelSearch = React.useCallback(() => {
+      setQuery('')
+      autocompleteView.setActive(false)
+      setSearchUIModel(undefined)
+      store.shell.setIsDrawerSwipeDisabled(false)
+    }, [setQuery, autocompleteView, store])
+
+    const onSubmitQuery = React.useCallback(() => {
+      const model = new SearchUIModel(store)
+      model.fetch(query)
+      setSearchUIModel(model)
+      store.shell.setIsDrawerSwipeDisabled(true)
+    }, [query, setSearchUIModel, store])
+
+    const onRefresh = React.useCallback(async () => {
+      setRefreshing(true)
+      try {
+        await foafs.fetch()
+      } finally {
+        setRefreshing(false)
+      }
+    }, [foafs, setRefreshing])
+
+    return (
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={[pal.view, styles.container]}>
+          <HeaderWithInput
+            isInputFocused={isInputFocused}
+            query={query}
+            setIsInputFocused={setIsInputFocused}
+            onChangeQuery={onChangeQuery}
+            onPressClearQuery={onPressClearQuery}
+            onPressCancelSearch={onPressCancelSearch}
+            onSubmitQuery={onSubmitQuery}
+          />
+          {searchUIModel ? (
+            <SearchResults model={searchUIModel} />
+          ) : (
+            <ScrollView
+              ref={scrollElRef}
+              testID="searchScrollView"
+              style={pal.view}
+              onScroll={onMainScroll}
+              scrollEventThrottle={100}
+              refreshControl={
+                <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={onRefresh}
+                  tintColor={pal.colors.text}
+                  titleColor={pal.colors.text}
+                />
+              }>
+              {query && autocompleteView.searchRes.length ? (
+                <>
+                  {autocompleteView.searchRes.map(item => (
+                    <ProfileCard
+                      key={item.did}
+                      testID={`searchAutoCompleteResult-${item.handle}`}
+                      handle={item.handle}
+                      displayName={item.displayName}
+                      avatar={item.avatar}
+                    />
+                  ))}
+                </>
+              ) : query && !autocompleteView.searchRes.length ? (
+                <View>
+                  <Text style={[pal.textLight, styles.searchPrompt]}>
+                    No results found for {autocompleteView.prefix}
+                  </Text>
+                </View>
+              ) : isInputFocused ? (
+                <View>
+                  <Text style={[pal.textLight, styles.searchPrompt]}>
+                    Search for users on the network
+                  </Text>
+                </View>
+              ) : (
+                <Suggestions foafs={foafs} suggestedActors={suggestedActors} />
+              )}
+              <View style={s.footerSpacer} />
+            </ScrollView>
+          )}
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  searchPrompt: {
+    textAlign: 'center',
+    paddingTop: 10,
+  },
+})