Fix/back button not working without browser history (#389)

* Introduce local history stack

To be able to know if the browser back navigation should be used, it is sometimes necessary to know which the previous page was.
E.g. it should not be used in case the current page is the manga page and the previous one is the reader.

* Handle cases where there is no previous page in the history stack

* Always use a button for the navigation back button

* Navigate from base route to library by replacing the current location

The base route should not be included in the history

src/screens/Manga.tsx

@@ -12,7 +12,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import requestManager from '@/lib/RequestManager';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import ChapterList from '@/components/manga/ChapterList';
 import { useRefreshManga } from '@/components/manga/hooks';
 import MangaDetails from '@/components/manga/MangaDetails';
@@ -32,6 +32,7 @@ const Manga: React.FC = () => {
     const { data: manga, error, isLoading, isValidating, mutate } = requestManager.useGetManga(id);
 
     const [refresh, { loading: refreshing }] = useRefreshManga(id);
+    useSetDefaultBackTo('library');
 
     useEffect(() => {
         // Automatically fetch manga from source if data is older then 24 hours

src/screens/settings/About.tsx

@@ -13,7 +13,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { useTranslation } from 'react-i18next';
 import requestManager from '@/lib/RequestManager';
 import ListItemLink from '@/components/util/ListItemLink';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
 
 export default function About() {
@@ -27,6 +27,8 @@ export default function About() {
 
     const { data: about } = requestManager.useGetAbout();
 
+    useSetDefaultBackTo('settings');
+
     if (about === undefined) {
         return <LoadingPlaceholder />;
     }

src/screens/settings/Backup.tsx

@@ -15,7 +15,7 @@ import { ListItemButton } from '@mui/material';
 import requestManager from '@/lib/RequestManager';
 import makeToast from '@/components/util/Toast';
 import ListItemLink from '@/components/util/ListItemLink';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 
 export default function Backup() {
     const { t } = useTranslation();
@@ -25,6 +25,8 @@ export default function Backup() {
         setAction(null);
     }, [t]);
 
+    useSetDefaultBackTo('settings');
+
     const submitBackup = (file: File) => {
         if (file.name.toLowerCase().endsWith('proto.gz')) {
             makeToast(t('settings.backup.label.restoring_backup'), 'info');

src/screens/settings/Categories.tsx

@@ -28,7 +28,7 @@ import { ICategory } from '@/typings';
 import requestManager from '@/lib/RequestManager';
 import StrictModeDroppable from '@/lib/StrictModeDroppable';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 
 const getItemStyle = (
     isDragging: boolean,
@@ -67,6 +67,8 @@ export default function Categories() {
     const [dialogDefault, setDialogDefault] = useState<boolean>(false);
     const theme = useTheme();
 
+    useSetDefaultBackTo('settings');
+
     const categoryReorder = (list: ICategory[], from: number, to: number) => {
         const newData = [...list];
         const [removed] = newData.splice(from, 1);

src/screens/settings/DefaultReaderSettings.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/util/readerSettings';
 import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
 import makeToast from '@/components/util/Toast';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 
 export default function DefaultReaderSettings() {
     const { t } = useTranslation();
@@ -31,6 +31,8 @@ export default function DefaultReaderSettings() {
 
     const { metadata, settings, loading } = useDefaultReaderSettings();
 
+    useSetDefaultBackTo('settings');
+
     const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
         requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() =>
             makeToast(t('reader.settings.error.label.failed_to_save_settings'), 'warning'),

src/screens/settings/LibrarySettings.tsx

@@ -24,7 +24,7 @@ import { ICategory, IncludeInGlobalUpdate } from '@/typings';
 import requestManager from '@/lib/RequestManager';
 import makeToast from '@/components/util/Toast';
 import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
-import NavbarContext from '@/components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import SearchSettings from '@/screens/settings/SearchSettings';
 
 const CategoriesDiv = styled('div')({
@@ -78,6 +78,8 @@ export default function LibrarySettings() {
         setAction(null);
     }, [t]);
 
+    useSetDefaultBackTo('settings');
+
     const { data: categories = [], error: requestError, mutate } = requestManager.useGetCategories();
     const [dialogCategories, setDialogCategories] = useState<ICategory[]>(categories);
     const [isDialogOpen, setIsDialogOpen] = useState(false);

src/screens/settings/SearchSettings.tsx

@@ -16,11 +16,14 @@ import { SearchMetadataKeys } from '@/typings';
 import { requestUpdateServerMetadata } from '@/util/metadata';
 import { useSearchSettings } from '@/util/searchSettings';
 import makeToast from '@/components/util/Toast';
+import { useSetDefaultBackTo } from '@/components/context/NavbarContext';
 
 export default function SearchSettings() {
     const { t } = useTranslation();
     const { metadata, settings } = useSearchSettings();
 
+    useSetDefaultBackTo('settings');
+
     const setSettingValue = (key: SearchMetadataKeys, value: boolean) => {
         requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() =>
             makeToast(t('search.error.label.failed_to_save_settings'), 'warning'),