Replace footer-nav back and forward arrows with search and notifications

src/view/shell/mobile/HistoryMenu.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
-import RootSiblings from 'react-native-root-siblings'
-import {NavigationTabModel} from '../../../state/models/navigation'
-
-export function createBackMenu(tab: NavigationTabModel): RootSiblings {
-  const onPressItem = (index: number) => {
-    sibling.destroy()
-    tab.goToIndex(index)
-  }
-  const onOuterPress = () => sibling.destroy()
-  const sibling = new RootSiblings(
-    (
-      <>
-        <TouchableWithoutFeedback onPress={onOuterPress}>
-          <View style={styles.bg} />
-        </TouchableWithoutFeedback>
-        <View style={[styles.menu, styles.back]}>
-          {tab.backTen.map((item, i) => (
-            <TouchableOpacity
-              key={item.index}
-              style={[styles.menuItem, i !== 0 && styles.menuItemBorder]}
-              onPress={() => onPressItem(item.index)}>
-              <Text>{item.title || item.url}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </>
-    ),
-  )
-  return sibling
-}
-
-export function createForwardMenu(tab: NavigationTabModel): RootSiblings {
-  const onPressItem = (index: number) => {
-    sibling.destroy()
-    tab.goToIndex(index)
-  }
-  const onOuterPress = () => sibling.destroy()
-  const sibling = new RootSiblings(
-    (
-      <>
-        <TouchableWithoutFeedback onPress={onOuterPress}>
-          <View style={styles.bg} />
-        </TouchableWithoutFeedback>
-        <View style={[styles.menu, styles.forward]}>
-          {tab.forwardTen.reverse().map((item, i) => (
-            <TouchableOpacity
-              key={item.index}
-              style={[styles.menuItem, i !== 0 && styles.menuItemBorder]}
-              onPress={() => onPressItem(item.index)}>
-              <Text>{item.title || item.url}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </>
-    ),
-  )
-  return sibling
-}
-
-const styles = StyleSheet.create({
-  bg: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    backgroundColor: '#000',
-    opacity: 0.1,
-  },
-  menu: {
-    position: 'absolute',
-    bottom: 80,
-    backgroundColor: '#fff',
-    borderRadius: 8,
-    opacity: 1,
-  },
-  back: {
-    left: 10,
-  },
-  forward: {
-    left: 60,
-  },
-  menuItem: {
-    paddingVertical: 10,
-    paddingLeft: 15,
-    paddingRight: 30,
-  },
-  menuItemBorder: {
-    borderTopWidth: 1,
-    borderTopColor: '#ddd',
-  },
-})

src/view/shell/mobile/index.tsx

@@ -24,12 +24,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {useStores} from '../../../state'
 import {NavigationModel} from '../../../state/models/navigation'
-import {TabsSelectorModel} from '../../../state/models/shell'
 import {match, MatchResult} from '../../routes'
 import {Login} from '../../screens/Login'
 import {Modal} from '../../com/modals/Modal'
 import {LocationNavigator} from './LocationNavigator'
-import {createBackMenu, createForwardMenu} from './HistoryMenu'
 import {MainMenu} from './MainMenu'
 import {TabsSelector} from './TabsSelector'
 import {s, colors} from '../../lib/styles'
@@ -108,8 +106,6 @@ export const MobileShell: React.FC = observer(() => {
   }
   const onDismissLocationNavigator = () => setLocationMenuActive(false)
 
-  const onPressBack = () => store.nav.tab.goBack()
-  const onPressForward = () => store.nav.tab.goForward()
   const onPressHome = () => {
     if (store.nav.tab.current.url === '/') {
       scrollElRef.current?.scrollToOffset({offset: 0})
@@ -118,11 +114,9 @@ export const MobileShell: React.FC = observer(() => {
     }
   }
   const onPressMenu = () => setMainMenuActive(true)
+  const onPressNotifications = () => store.nav.navigate('/notifications')
   const onPressTabs = () => setTabsSelectorActive(true)
 
-  const onLongPressBack = () => createBackMenu(store.nav.tab)
-  const onLongPressForward = () => createForwardMenu(store.nav.tab)
-
   const goBack = () => store.nav.tab.goBack()
   const swipeGesture = Gesture.Pan()
     .onUpdate(e => {
@@ -206,23 +200,13 @@ export const MobileShell: React.FC = observer(() => {
       </SafeAreaView>
       <View style={styles.bottomBar}>
         <Btn icon="house" onPress={onPressHome} />
+        <Btn icon="search" inactive={true} onPress={() => {} /* TODO */} />
+        <Btn icon="menu" onPress={onPressMenu} />
         <Btn
-          icon="angle-left"
+          icon={['far', 'bell']}
-          inactive={!store.nav.tab.canGoBack}
+          onPress={onPressNotifications}
-          onPress={onPressBack}
-          onLongPress={onLongPressBack}
-        />
-        <Btn
-          icon="menu"
-          onPress={onPressMenu}
           notificationCount={store.me.notificationCount}
         />
-        <Btn
-          icon="angle-right"
-          inactive={!store.nav.tab.canGoForward}
-          onPress={onPressForward}
-          onLongPress={onLongPressForward}
-        />
         <Btn icon={['far', 'clone']} onPress={onPressTabs} />
       </View>
       <Modal />