Update LayoutMode to use modern instead of experimental

src/RootAppRouter.tsx

@@ -16,17 +16,14 @@ import Backdrop from 'components/Backdrop';
 import layoutManager from 'components/layoutManager';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import { LayoutMode } from 'constants/layoutMode';
 import appTheme from 'themes';
 import { ThemeStorageManager } from 'themes/themeStorageManager';
 
-const isModernLayout = layoutManager.layout === LayoutMode.Experimental;
-
 const router = createHashRouter([
     {
         element: <RootAppLayout />,
         children: [
-            ...(isModernLayout ? MODERN_APP_ROUTES : LEGACY_APP_ROUTES),
+            ...(layoutManager.modern ? MODERN_APP_ROUTES : LEGACY_APP_ROUTES),
             ...DASHBOARD_APP_ROUTES,
             ...WIZARD_APP_ROUTES,
             {
@@ -59,7 +56,7 @@ function RootAppLayout() {
             storageManager={ThemeStorageManager}
         >
             <Backdrop />
-            <AppHeader isHidden={isModernLayout || isNewLayoutPath} />
+            <AppHeader isHidden={layoutManager.modern || isNewLayoutPath} />
 
             <Outlet />
         </ThemeProvider>

src/components/apphost.js

@@ -183,7 +183,7 @@ function supportsFullscreen() {
 }
 
 function getDefaultLayout() {
-    return LayoutMode.Experimental;
+    return LayoutMode.Modern;
 }
 
 function supportsHtmlMediaAutoplay() {
@@ -456,4 +456,3 @@ if (window.addEventListener) {
     window.addEventListener('focus', onAppVisible);
     window.addEventListener('blur', onAppHidden);
 }
-

src/components/layoutManager.js

@@ -21,14 +21,14 @@ class LayoutManager {
     tv = false;
     mobile = false;
     desktop = false;
-    experimental = false;
+    modern = false;
 
     get layout() {
         if (this.tv) return LayoutMode.Tv;
-        if (this.experimental) return LayoutMode.Experimental;
+        if (this.modern) return LayoutMode.Modern;
         if (this.mobile) return LayoutMode.Mobile;
         if (this.desktop) return LayoutMode.Desktop;
-        return LayoutMode.Experimental;
+        return LayoutMode.Modern;
     }
 
     setLayout(layout = '', save = true) {
@@ -43,8 +43,8 @@ class LayoutManager {
         }
 
         console.debug('[LayoutManager] using layout mode', layoutValue);
-        this.experimental = layoutValue === LayoutMode.Experimental;
-        if (this.experimental) {
+        this.modern = layoutValue === LayoutMode.Modern;
+        if (this.modern) {
             const legacyLayoutMode = browser.mobile ? LayoutMode.Mobile : LayoutMode.Desktop;
             console.debug('[LayoutManager] using legacy layout mode', legacyLayoutMode);
             setLayout(this, legacyLayoutMode, legacyLayoutMode);
@@ -56,7 +56,11 @@ class LayoutManager {
     }
 
     getSavedLayout() {
-        return appSettings.get(SETTING_KEY);
+        const saved = appSettings.get(SETTING_KEY);
+        // Validate that the saved layout is a supported layout mode
+        if (saved && Object.values(LayoutMode).includes(saved)) {
+            return saved;
+        }
     }
 
     autoLayout() {

src/components/maintabsmanager.js

@@ -47,7 +47,7 @@ function allowSwipe(target) {
 }
 
 function configureSwipeTabs(view, currentElement) {
-    if (!browser.touch || layoutManager.experimental) {
+    if (!browser.touch || layoutManager.modern) {
         return;
     }
 

src/components/router/appRouter.js

@@ -7,7 +7,6 @@ import loading from '../loading/loading';
 import alert from '../alert';
 
 import layoutManager from 'components/layoutManager';
-import { LayoutMode } from 'constants/layoutMode';
 import { getItemQuery } from 'hooks/useItem';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { queryClient } from 'utils/query/queryClient';
@@ -405,7 +404,7 @@ class AppRouter {
         }
 
         if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
-            const isModernLayout = layoutManager.layout === LayoutMode.Experimental;
+            const isModernLayout = layoutManager.modern;
 
             if (isModernLayout && item.CollectionType == CollectionType.Books) {
                 url = `#/books?topParentId=${item.Id}&collectionType=${item.CollectionType}`;

src/constants/layoutMode.ts

@@ -4,8 +4,8 @@ export enum LayoutMode {
     Auto = 'auto',
     /** The legacy desktop layout. */
     Desktop = 'desktop',
-    /** The modern React based layout. */
-    Experimental = 'experimental',
+    /** The modern responsive layout. */
+    Modern = 'modern',
     /** The legacy mobile layout. */
     Mobile = 'mobile',
     /** The TV layout. */