Refactor app structure

README.md

@@ -76,21 +76,24 @@ Jellyfin Web is the frontend used for most of the clients available for end user
 ```
 .
 └── src
-    ├── assets         # Static assets
-    ├── components     # Higher order visual components and React components
-    ├── controllers    # Legacy page views and controllers 🧹
-    ├── elements       # Basic webcomponents and React wrappers 🧹
-    ├── hooks          # Custom React hooks
-    ├── legacy         # Polyfills for legacy browsers
-    ├── libraries      # Third party libraries 🧹
-    ├── plugins        # Client plugins
-    ├── routes         # React routes/pages
-    ├── scripts        # Random assortment of visual components and utilities 🐉
-    ├── strings        # Translation files
-    ├── styles         # Common app Sass stylesheets
-    ├── themes         # CSS themes
-    ├── types          # Common TypeScript interfaces/types
-    └── utils          # Utility functions
+    ├── apps
+    │   ├── experimental  # New experimental app layout
+    │   └── stable        # Classic (stable) app layout
+    ├── assets            # Static assets
+    ├── components        # Higher order visual components and React components
+    ├── controllers       # Legacy page views and controllers 🧹
+    ├── elements          # Basic webcomponents and React wrappers 🧹
+    ├── hooks             # Custom React hooks
+    ├── legacy            # Polyfills for legacy browsers
+    ├── libraries         # Third party libraries 🧹
+    ├── plugins           # Client plugins
+    ├── routes            # React routes/pages
+    ├── scripts           # Random assortment of visual components and utilities 🐉
+    ├── strings           # Translation files
+    ├── styles            # Common app Sass stylesheets
+    ├── themes            # CSS themes
+    ├── types             # Common TypeScript interfaces/types
+    └── utils             # Utility functions
 ```
 
 - 🧹 — Needs cleanup

src/RootApp.tsx

@@ -1,13 +1,16 @@
+import loadable from '@loadable/component';
 import { History } from '@remix-run/router';
 import React from 'react';
 
+import StableApp from './apps/stable/App';
 import AppHeader from './components/AppHeader';
 import Backdrop from './components/Backdrop';
 import { HistoryRouter } from './components/HistoryRouter';
 import { ApiProvider } from './hooks/useApi';
-import { AppRoutes, ExperimentalAppRoutes } from './routes';
 
-const App = ({ history }: { history: History }) => {
+const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
+
+const RootApp = ({ history }: { history: History }) => {
     const layoutMode = localStorage.getItem('layout');
 
     return (
@@ -18,11 +21,15 @@ const App = ({ history }: { history: History }) => {
 
                 <div className='mainAnimatedPages skinBody' />
                 <div className='skinBody'>
-                    {layoutMode === 'experimental' ? <ExperimentalAppRoutes /> : <AppRoutes /> }
+                    {
+                        layoutMode === 'experimental' ?
+                            <ExperimentalApp /> :
+                            <StableApp />
+                    }
                 </div>
             </HistoryRouter>
         </ApiProvider>
     );
 };
 
-export default App;
+export default RootApp;

src/apps/experimental/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import AppHeader from '../../components/AppHeader';
+import Backdrop from '../../components/Backdrop';
+import { ExperimentalAppRoutes } from './routes/AppRoutes';
+
+const ExperimentalApp = () => (
+    <>
+        <Backdrop />
+        <AppHeader />
+
+        <div className='mainAnimatedPages skinBody' />
+        <div className='skinBody'>
+            <ExperimentalAppRoutes />
+        </div>
+    </>
+);
+
+export default ExperimentalApp;

src/apps/experimental/routes/AppRoutes.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import ConnectionRequired from '../../components/ConnectionRequired';
-import ServerContentPage from '../../components/ServerContentPage';
-import { toAsyncPageRoute } from '../AsyncRoute';
-import { toViewManagerPageRoute } from '../LegacyRoute';
+import ConnectionRequired from '../../../components/ConnectionRequired';
+import ServerContentPage from '../../../components/ServerContentPage';
+import { toAsyncPageRoute } from '../../../components/router/AsyncRoute';
+import { toViewManagerPageRoute } from '../../../components/router/LegacyRoute';
 import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
 

src/apps/experimental/routes/asyncRoutes/admin.ts

@@ -1,4 +1,4 @@
-import { AsyncRoute } from '../../AsyncRoute';
+import { AsyncRoute } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'usernew.html', page: 'user/usernew' },

src/apps/experimental/routes/asyncRoutes/user.ts

@@ -1,4 +1,4 @@
-import { AsyncRoute } from '../../AsyncRoute';
+import { AsyncRoute } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'search.html', page: 'search' },

src/apps/experimental/routes/legacyRoutes/admin.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
     {

src/apps/experimental/routes/legacyRoutes/public.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
     {

src/apps/experimental/routes/legacyRoutes/user.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_USER_ROUTES: LegacyRoute[] = [
     {

src/apps/stable/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import AppHeader from '../../components/AppHeader';
+import Backdrop from '../../components/Backdrop';
+import { AppRoutes } from './routes/AppRoutes';
+
+const StableApp = () => (
+    <>
+        <Backdrop />
+        <AppHeader />
+
+        <div className='mainAnimatedPages skinBody' />
+        <div className='skinBody'>
+            <AppRoutes />
+        </div>
+    </>
+);
+
+export default StableApp;

src/apps/stable/routes/AppRoutes.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import ConnectionRequired from '../../components/ConnectionRequired';
-import ServerContentPage from '../../components/ServerContentPage';
-import { toAsyncPageRoute } from '../AsyncRoute';
-import { toViewManagerPageRoute } from '../LegacyRoute';
+import ConnectionRequired from '../../../components/ConnectionRequired';
+import ServerContentPage from '../../../components/ServerContentPage';
+import { toAsyncPageRoute } from '../../../components/router/AsyncRoute';
+import { toViewManagerPageRoute } from '../../../components/router/LegacyRoute';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
 

src/apps/stable/routes/asyncRoutes/user.ts

@@ -1,4 +1,4 @@
-import { AsyncRoute } from '../../AsyncRoute';
+import { AsyncRoute } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'search.html', page: 'search' }

src/apps/stable/routes/legacyRoutes/admin.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
     {

src/apps/stable/routes/legacyRoutes/public.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
     {

src/apps/stable/routes/legacyRoutes/user.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../LegacyRoute';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_USER_ROUTES: LegacyRoute[] = [
     {

src/components/router/AsyncRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import AsyncPage from '../components/AsyncPage';
+import AsyncPage from '../AsyncPage';
 
 export interface AsyncRoute {
     /** The URL path for this route. */

src/components/router/LegacyRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import ViewManagerPage, { ViewManagerPageProps } from '../components/viewManager/ViewManagerPage';
+import ViewManagerPage, { ViewManagerPageProps } from '../viewManager/ViewManagerPage';
 
 export interface LegacyRoute {
     path: string,

src/index.jsx

@@ -34,7 +34,7 @@ import './legacy/htmlMediaElement';
 import './legacy/vendorStyles';
 import { currentSettings } from './scripts/settings/userSettings';
 import taskButton from './scripts/taskbutton';
-import App from './App.tsx';
+import RootApp from './RootApp.tsx';
 
 import './styles/livetv.scss';
 import './styles/dashboard.scss';
@@ -151,7 +151,7 @@ async function onAppReady() {
 
     ReactDOM.render(
         <StrictMode>
-            <App history={history} />
+            <RootApp history={history} />
         </StrictMode>,
         root
     );

src/routes/index.tsx

@@ -1,2 +0,0 @@
-export * from './appRoutes';
-export * from './experimentalAppRoutes';