Better bottom navigation

src/navigators/BottomNavigator.tsx

@@ -8,7 +8,7 @@ const Browse = lazy(() => import('../screens/browse/BrowseScreen'));
 const More = lazy(() => import('../screens/more/MoreScreen'));
 
 import { getString } from '@strings/translations';
-import { useAppSettings, useTheme } from '@hooks/persisted';
+import { useAppSettings, usePlugins, useTheme } from '@hooks/persisted';
 import { BottomNavigatorParamList } from './types';
 
 const Tab = createMaterialBottomTabNavigator<BottomNavigatorParamList>();
@@ -22,6 +22,11 @@ const BottomNavigator = () => {
     showLabelsInNav = false,
   } = useAppSettings();
 
+  const { filteredInstalledPlugins } = usePlugins();
+  const pluginsWithUpdate = filteredInstalledPlugins.filter(
+    p => p.hasUpdate,
+  ).length;
+
   return (
     <Tab.Navigator
       barStyle={{ backgroundColor: theme.surface2 }}
@@ -63,6 +68,9 @@ const BottomNavigator = () => {
         options={{
           title: getString('browse'),
           tabBarIcon: 'compass-outline',
+          tabBarBadge: pluginsWithUpdate
+            ? pluginsWithUpdate.toString()
+            : undefined,
         }}
       />
       <Tab.Screen

src/navigators/types/index.ts

@@ -53,6 +53,11 @@ export type HistoryScreenProps = CompositeScreenProps<
   StackScreenProps<RootStackParamList>
 >;
 
+export type UpdateScreenProps = CompositeScreenProps<
+  MaterialBottomTabScreenProps<BottomNavigatorParamList, 'Updates'>,
+  StackScreenProps<RootStackParamList>
+>;
+
 export type BrowseScreenProps = CompositeScreenProps<
   MaterialBottomTabScreenProps<BottomNavigatorParamList, 'Browse'>,
   StackScreenProps<RootStackParamList>

src/screens/browse/BrowseScreen.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'react-native';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { TabView, TabBar } from 'react-native-tab-view';
 
 import { useSearch } from '@hooks';
@@ -38,6 +38,18 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
     [],
   );
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        if (navigation.isFocused()) {
+          e.preventDefault();
+
+          navigation.navigate('GlobalSearchScreen', {});
+        }
+      }),
+    [navigation],
+  );
+
   const [index, setIndex] = React.useState(0);
   return (
     <>

src/screens/history/HistoryScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, SectionList, Text } from 'react-native';
 import dayjs from 'dayjs';
 import { Portal } from 'react-native-paper';
@@ -71,6 +71,23 @@ const HistoryScreen = ({ navigation }: HistoryScreenProps) => {
     setFalse: closeClearHistoryDialog,
   } = useBoolean();
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        let lastNovel = history[history.length - 1];
+        if (navigation.isFocused() && lastNovel) {
+          e.preventDefault();
+
+          navigation.navigate('Novel', {
+            name: lastNovel.name,
+            path: lastNovel.novelPath,
+            pluginId: lastNovel.pluginId,
+          });
+        }
+      }),
+    [navigation],
+  );
+
   return (
     <>
       <SearchbarV2

src/screens/library/LibraryScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import {
@@ -85,6 +85,18 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
 
   const bottomSheetRef = useRef<BottomSheetModal | null>(null);
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        if (navigation.isFocused()) {
+          e.preventDefault();
+
+          bottomSheetRef.current?.present?.();
+        }
+      }),
+    [navigation],
+  );
+
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State },
   ) =>

src/screens/more/MoreScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable, Text, ScrollView } from 'react-native';
 import { getString } from '@strings/translations';
 
@@ -28,6 +28,23 @@ const MoreScreen = ({ navigation }: MoreStackScreenProps) => {
   const enableIncognitoMode = () =>
     setLibrarySettings({ incognitoMode: !incognitoMode });
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        if (navigation.isFocused()) {
+          e.preventDefault();
+
+          navigation.navigate('MoreStack', {
+            screen: 'SettingsStack',
+            params: {
+              screen: 'Settings',
+            },
+          });
+        }
+      }),
+    [navigation],
+  );
+
   return (
     <ScrollView>
       <MoreHeader

src/screens/updates/UpdatesScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import dayjs from 'dayjs';
 import { RefreshControl, SectionList, StyleSheet, Text } from 'react-native';
 
@@ -19,8 +19,9 @@ import { useFocusEffect } from '@react-navigation/native';
 import { deleteChapter } from '@database/queries/ChapterQueries';
 import { showToast } from '@utils/showToast';
 import ServiceManager from '@services/ServiceManager';
+import { UpdateScreenProps } from '@navigators/types';
 
-const UpdatesScreen = () => {
+const UpdatesScreen = ({ navigation }: UpdateScreenProps) => {
   const theme = useTheme();
   const {
     isLoading,
@@ -76,6 +77,20 @@ const UpdatesScreen = () => {
     }, [downloadQueue]),
   );
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        if (navigation.isFocused()) {
+          e.preventDefault();
+
+          navigation.navigate('MoreStack', {
+            screen: 'Downloads',
+          });
+        }
+      }),
+    [navigation],
+  );
+
   return (
     <>
       <SearchbarV2