From 61614a50c9578f44d289a513ed14bc87fb5395a7 Mon Sep 17 00:00:00 2001
From: Soopyboo32 <49228220+Soopyboo32@users.noreply.github.com>
Date: Fri, 22 Nov 2024 16:08:03 +0800
Subject: [PATCH] Better bottom navigation

---
 src/navigators/BottomNavigator.tsx    | 10 +++++++++-
 src/navigators/types/index.ts         |  5 +++++
 src/screens/library/LibraryScreen.tsx | 14 +++++++++++++-
 src/screens/updates/UpdatesScreen.tsx | 19 +++++++++++++++++--
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/navigators/BottomNavigator.tsx b/src/navigators/BottomNavigator.tsx
index 610f35757..c4160b304 100644
--- a/src/navigators/BottomNavigator.tsx
+++ b/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
diff --git a/src/navigators/types/index.ts b/src/navigators/types/index.ts
index 82f7f7c10..f041de5d4 100644
--- a/src/navigators/types/index.ts
+++ b/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>
diff --git a/src/screens/library/LibraryScreen.tsx b/src/screens/library/LibraryScreen.tsx
index c508d55ed..09a788d61 100644
--- a/src/screens/library/LibraryScreen.tsx
+++ b/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 },
   ) =>
diff --git a/src/screens/updates/UpdatesScreen.tsx b/src/screens/updates/UpdatesScreen.tsx
index dc66cd1a7..41b262ee9 100644
--- a/src/screens/updates/UpdatesScreen.tsx
+++ b/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