tmp

src/App.tsx

@@ -21,6 +21,7 @@ import { ServerUpdateChecker } from '@/modules/app-updates/components/ServerUpda
 import { lazyLoadFallback } from '@/modules/core/utils/LazyLoad.tsx';
 import { ErrorBoundary } from '@/modules/core/components/ErrorBoundary.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { ReaderNew } from '@/modules/reader/screens/ReaderNew.tsx';
 
 const { Browse } = loadable(() => import('@/modules/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/modules/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
@@ -164,8 +165,8 @@ const MainApp = () => {
 const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
-            <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
-            <Route path="*" element={null} />
+            <Route path="/" element={<Reader />} />
+            <Route path="new" element={<ReaderNew />} />
         </Routes>
     </ErrorBoundary>
 );
@@ -181,8 +182,10 @@ export const App: React.FC = () => (
             <Box sx={{ flexShrink: 0 }}>
                 <DefaultNavBar />
             </Box>
-            <MainApp />
-            <ReaderApp />
+            <Routes>
+                <Route path="*" element={<MainApp />} />
+                <Route path="manga/:mangaId/chapter/:chapterIndex/*" element={<ReaderApp />} />
+            </Routes>
         </Box>
     </AppContext>
 );

src/modules/reader-deprecated/components/ReaderNavBar.tsx

@@ -187,17 +187,7 @@ export function ReaderNavBar(props: IProps) {
     useEffect(() => {
         window.addEventListener('scroll', handleScroll);
 
-        const rootEl: HTMLDivElement = document.querySelector('#root')!;
-        const mainContainer: HTMLDivElement = document.querySelector('#appMainContainer')!;
-
-        // main container and root div need to change styles...
-        rootEl.style.display = 'flex';
-        rootEl.style.flexDirection = 'column';
-        mainContainer.style.display = 'none';
-
         return () => {
-            rootEl.style.display = 'block';
-            mainContainer.style.display = 'block';
             window.removeEventListener('scroll', handleScroll);
         };
     }, [handleScroll]); // handleScroll changes on every render

src/modules/reader/components/ReaderChapterViewer.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 Box from '@mui/material/Box';
+
+export const ReaderChapterViewer = () => {
+    const a = null;
+
+    return <Box />;
+};

src/modules/reader/components/ReaderViewer.tsx

@@ -0,0 +1,13 @@
+/*
+ * 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/.
+ */
+
+export const ReaderViewer = () => {
+    const a = null;
+
+    return null;
+};