Extract reader exit button

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -8,8 +8,6 @@
 
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
-import ArrowBack from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import MenuItem from '@mui/material/MenuItem';
@@ -21,9 +19,7 @@ import { alpha } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
 import { forwardRef, memo } from 'react';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
-import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
-import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
@@ -41,6 +37,7 @@ import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigat
 import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx';
 import { FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts';
 import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { ReaderExitButton } from '@/modules/reader/components/overlay/navigation/ReaderExitButton.tsx';
 
 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 
@@ -52,8 +49,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
         Pick<TReaderScrollbarContext, 'scrollbarYSize'>
 >(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => {
     const { t } = useTranslation();
-    const getOptionForDirection = useGetOptionForDirection();
-    const handleBack = useBackButton();
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
 
     const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
@@ -76,11 +71,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                     boxShadow: 2,
                 }}
             >
-                <CustomTooltip title={t('reader.button.exit')}>
+                <ReaderExitButton />
-                    <IconButton sx={{ marginRight: 2 }} onClick={handleBack} color="inherit">
-                        {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
-                    </IconButton>
-                </CustomTooltip>
                 <Stack sx={{ flexGrow: 1 }}>
                     {manga && currentChapter ? (
                         <>

src/modules/reader/components/overlay/navigation/ReaderExitButton.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { memo } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+
+const BaseReaderExitButton = ({ exit }: { exit: ReturnType<typeof ReaderService.useExit> }) => {
+    const { t } = useTranslation();
+    const getOptionForDirection = useGetOptionForDirection();
+
+    return (
+        <CustomTooltip title={t('reader.button.exit')}>
+            <IconButton sx={{ marginRight: 2 }} onClick={exit} color="inherit">
+                {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
+            </IconButton>
+        </CustomTooltip>
+    );
+};
+
+export const ReaderExitButton = withPropsFrom(
+    memo(BaseReaderExitButton),
+    [() => ({ exit: ReaderService.useExit() })],
+    ['exit'],
+);

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -9,15 +9,12 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
-import ArrowBack from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import Divider from '@mui/material/Divider';
 import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Drawer from '@mui/material/Drawer';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
-import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
 import { ReaderNavBarDesktopMetadata } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx';
@@ -36,6 +33,7 @@ import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.
 import { IReaderSettings, ReaderStateChapters, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { ReaderExitButton } from '@/modules/reader/components/overlay/navigation/ReaderExitButton.tsx';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -65,18 +63,13 @@ const BaseReaderNavBarDesktop = ({
     previousChapter,
     nextChapter,
     isStaticNav,
-    exit,
 }: ReaderNavBarDesktopProps &
     Pick<NavbarContextType, 'setReaderNavBarWidth'> &
     Pick<TReaderStateMangaContext, 'manga'> &
     Pick<ReaderStateChapters, 'currentChapter' | 'previousChapter' | 'nextChapter' | 'chapters'> &
-    Pick<IReaderSettings, 'isStaticNav'> & {
+    Pick<IReaderSettings, 'isStaticNav'>) => {
-        exit: ReturnType<typeof ReaderService.useExit>;
-    }) => {
     const { t } = useTranslation();
 
-    const getOptionForDirection = useGetOptionForDirection();
-
     const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
 
     const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
@@ -111,11 +104,7 @@ const BaseReaderNavBarDesktop = ({
             <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
                 <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
                     <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <CustomTooltip title={t('reader.button.exit')}>
+                        <ReaderExitButton />
-                            <IconButton onClick={exit} color="inherit">
-                                {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
-                            </IconButton>
-                        </CustomTooltip>
                         <CustomTooltip title={t('reader.settings.label.static_navigation')}>
                             <IconButton
                                 onClick={() => {
@@ -168,16 +157,6 @@ export const ReaderNavBarDesktop = withPropsFrom(
         useReaderStateChaptersContext,
         userReaderStatePagesContext,
         ReaderService.useSettingsWithoutDefaultFlag,
-        () => ({ exit: ReaderService.useExit() }),
-    ],
-    [
-        'setReaderNavBarWidth',
-        'manga',
-        'chapters',
-        'currentChapter',
-        'previousChapter',
-        'nextChapter',
-        'isStaticNav',
-        'exit',
     ],
+    ['setReaderNavBarWidth', 'manga', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'],
 );