feat: FAB for Last Read Chapter in Library (#500)

* chapter drawer themed textcolor

* added FAB to Library screen + some insets

* Added Settings butten

Co-authored-by: Patrick <patrick.los@proton.me>

src/components/SearchbarV2/SearchbarV2.tsx

@@ -40,8 +40,10 @@ const Searchbar: React.FC<SearcbarProps> = ({
   const searchbarRef = useRef<any>(null);
   const focusSearchbar = () => searchbarRef.current.focus();
 
-  const { top } = useSafeAreaInsets();
+  const { top, right, left } = useSafeAreaInsets();
   const marginTop = top + 8;
+  const marginRight = right + 16;
+  const marginLeft = left + 16;
 
   return (
     <View
@@ -49,6 +51,8 @@ const Searchbar: React.FC<SearcbarProps> = ({
         styles.searchbarContainer,
         {
           marginTop,
+          marginRight,
+          marginLeft,
           backgroundColor: color(theme.primary).alpha(0.08).string(),
         },
       ]}

src/redux/settings/settings.reducer.js

@@ -31,6 +31,7 @@ export const initialState = {
    */
 
   downloadedOnlyMode: false,
+  useLibraryFAB: false,
 
   /**
    * Browse settings

src/screens/library/LibraryScreen.tsx

@@ -20,7 +20,7 @@ import { useLibrary } from './hooks/useLibrary';
 import { useTheme } from '@hooks/useTheme';
 import useSearch from '@hooks/useSearch';
 import { getString } from '@strings/translations';
-import { Portal } from 'react-native-paper';
+import { FAB, Portal } from 'react-native-paper';
 import { useLibrarySettings } from '@hooks/useSettings';
 import {
   markAllChaptersRead,
@@ -32,6 +32,10 @@ import useBoolean from '@hooks/useBoolean';
 import { debounce, intersection } from 'lodash';
 import { ButtonVariation } from '@components/Button/Button';
 import { useBackHandler } from '@hooks/useBackHandler';
+import { openChapter } from '@utils/handleNavigateParams';
+import useHistory from '@hooks/useHistory';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSettings } from '@hooks/reduxHooks';
 
 type State = NavigationState<{
   key: string;
@@ -48,6 +52,12 @@ const LibraryScreen = () => {
     incognitoMode = false,
   } = useLibrarySettings();
 
+  const { useLibraryFAB = false } = useSettings();
+
+  const { isLoading: isHistoryLoading, history, error } = useHistory();
+
+  const { right: rightInset } = useSafeAreaInsets();
+
   const onChangeText = debounce((text: string) => {
     setSearchText(text);
   }, 100);
@@ -222,6 +232,29 @@ const LibraryScreen = () => {
         onIndexChange={setIndex}
         initialLayout={{ width: layout.width }}
       />
+      {useLibraryFAB &&
+        !isHistoryLoading &&
+        history &&
+        history.length !== 0 &&
+        !error && (
+          <FAB
+            style={[
+              styles.fab,
+              { backgroundColor: theme.primary, marginRight: rightInset + 16 },
+            ]}
+            small
+            color={theme.onPrimary}
+            uppercase={false}
+            label={'Resume'}
+            icon="play"
+            onPress={() => {
+              navigate(
+                'Chapter' as never,
+                openChapter(history[0], history[0]) as never,
+              );
+            }}
+          />
+        )}
       <SetCategoryModal
         novelId={selectedNovelIds}
         currentCategoryIds={selectedNovelCategoryIds}
@@ -285,4 +318,10 @@ const styles = StyleSheet.create({
   globalSearchBtnLabel: {
     fontWeight: 'bold',
   },
+  fab: {
+    position: 'absolute',
+    margin: 16,
+    right: 0,
+    bottom: 0,
+  },
 });

src/screens/novel/NovelScreen.js

@@ -73,7 +73,7 @@ const Novel = ({ route, navigation }) => {
 
   const theme = useTheme();
   const dispatch = useDispatch();
-  const { top: topInset } = useSafeAreaInsets();
+  const { top: topInset, bottom: bottomInset } = useSafeAreaInsets();
   const progressViewOffset = topInset + 32;
 
   const { novel, chapters, loading, updating } = useNovel();
@@ -652,7 +652,10 @@ const Novel = ({ route, navigation }) => {
           chapters.length > 0 &&
           lastReadChapter && (
             <FAB
-              style={[styles.fab, { backgroundColor: theme.primary }]}
+              style={[
+                styles.fab,
+                { backgroundColor: theme.primary, marginBottom: bottomInset },
+              ]}
               small
               color={theme.onPrimary}
               uppercase={false}

src/screens/settings/SettingsGeneralScreen.js

@@ -35,6 +35,7 @@ const GenralSettings = ({ navigation }) => {
     defaultChapterSort = 'ORDER BY chapterId ASC',
     refreshNovelMetadata = false,
     disableHapticFeedback = false,
+    useLibraryFAB = false,
   } = useSettings();
 
   const { showLastUpdateTime = true } = useSelector(
@@ -83,6 +84,14 @@ const GenralSettings = ({ navigation }) => {
             }
             theme={theme}
           />
+          <SwitchSetting
+            label="Use FAB in Library"
+            value={useLibraryFAB}
+            onPress={() =>
+              dispatch(setAppSettings('useLibraryFAB', !useLibraryFAB))
+            }
+            theme={theme}
+          />
           <List.Divider theme={theme} />
           <List.SubHeader theme={theme}>Novel</List.SubHeader>
           <List.Item

src/utils/constants/settings.ts

@@ -14,6 +14,7 @@ export interface LibrarySettings {
   novelsPerRow?: number;
   incognitoMode?: boolean;
   downloadedOnlyMode?: boolean;
+  useLibraryFAB?: boolean;
 }
 
 export interface CategorySettings {