Merge branch 'master' into segment-deletion

.ci/azure-pipelines-build.yml

@@ -26,8 +26,6 @@ jobs:
 
   - script: 'npm ci --no-audit'
     displayName: 'Install Dependencies'
-    env:
-      SKIP_PREPARE: 'true'
 
   - script: 'npm run build:development'
     displayName: 'Build Development'

.escheckrc

@@ -6,7 +6,6 @@
         "./dist/libraries/pdf.worker.js",
         "./dist/libraries/worker-bundle.js",
         "./dist/libraries/wasm-gen/libarchive.js",
-        "./dist/node_modules.@jellyfin.libass-wasm.*.chunk.js",
         "./dist/serviceworker.js"
     ]
 }

.eslintrc.js

@@ -2,8 +2,9 @@ const restrictedGlobals = require('confusing-browser-globals');
 
 module.exports = {
     root: true,
+    parser: '@typescript-eslint/parser',
     plugins: [
-        '@babel',
+        '@typescript-eslint',
         'react',
         'promise',
         'import',
@@ -16,14 +17,6 @@ module.exports = {
         es2017: true,
         es2020: true
     },
-    parserOptions: {
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        ecmaFeatures: {
-            impliedStrict: true,
-            jsx: true
-        }
-    },
     extends: [
         'eslint:recommended',
         'plugin:react/recommended',
@@ -46,50 +39,72 @@ module.exports = {
         'keyword-spacing': ['error'],
         'no-throw-literal': ['error'],
         'max-statements-per-line': ['error'],
+        'max-params': ['error', 7],
         'no-duplicate-imports': ['error'],
         'no-empty-function': ['error'],
         'no-floating-decimal': ['error'],
         'no-multi-spaces': ['error'],
         'no-multiple-empty-lines': ['error', { 'max': 1 }],
         'no-nested-ternary': ['error'],
+        'no-redeclare': ['off'],
+        '@typescript-eslint/no-redeclare': ['error', { builtinGlobals: false }],
         'no-restricted-globals': ['error'].concat(restrictedGlobals),
         'no-return-assign': ['error'],
         'no-return-await': ['error'],
         'no-sequences': ['error', { 'allowInParentheses': false }],
+        'no-shadow': ['off'],
+        '@typescript-eslint/no-shadow': ['error'],
         'no-trailing-spaces': ['error'],
-        '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
+        'no-unused-expressions': ['off'],
-        'no-useless-constructor': ['error'],
+        '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
+        'no-useless-constructor': ['off'],
+        '@typescript-eslint/no-useless-constructor': ['error'],
         'no-var': ['error'],
         'no-void': ['error', { 'allowAsStatement': true }],
         'no-warning-comments': ['warn', { 'terms': ['fixme', 'hack', 'xxx'] }],
+        'object-curly-spacing': ['error', 'always'],
         'one-var': ['error', 'never'],
+        'operator-linebreak': ['error', 'before', { overrides: { '?': 'after', ':': 'after', '=': 'after' } }],
         'padded-blocks': ['error', 'never'],
         'prefer-const': ['error', { 'destructuring': 'all' }],
+        '@typescript-eslint/prefer-for-of': ['error'],
         'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
-        '@babel/semi': ['error'],
+        'radix': ['error'],
+        '@typescript-eslint/semi': ['error'],
         'space-before-blocks': ['error'],
         'space-infix-ops': 'error',
         'yoda': 'error',
-        '@typescript-eslint/no-shadow': 'error',
 
         'react/jsx-filename-extension': ['error', { 'extensions': ['.jsx', '.tsx'] }],
+        'react/jsx-no-bind': ['error'],
+        'react/jsx-no-constructed-context-values': ['error'],
+        'react/no-array-index-key': ['error'],
 
-        'sonarjs/cognitive-complexity': ['warn'],
+        'sonarjs/no-inverted-boolean-check': ['error'],
         // TODO: Enable the following rules and fix issues
+        'sonarjs/cognitive-complexity': ['off'],
         'sonarjs/no-duplicate-string': ['off']
     },
     settings: {
         react: {
             version: 'detect'
         },
-        'import/extensions': [
+        'import/parsers': {
+            '@typescript-eslint/parser': [ '.ts', '.tsx' ]
+        },
+        'import/resolver': {
+            node: {
+                extensions: [
                     '.js',
                     '.ts',
                     '.jsx',
                     '.tsx'
                 ],
-        'import/parsers': {
+                moduleDirectory: [
-            '@typescript-eslint/parser': [ '.ts', '.tsx' ]
+                    'node_modules',
+                    'src'
+                ]
+            }
         },
         polyfills: [
             // Native Promises Only
@@ -193,9 +208,12 @@ module.exports = {
             files: [
                 './src/**/*.js',
                 './src/**/*.jsx',
-                './src/**/*.ts'
+                './src/**/*.ts',
+                './src/**/*.tsx'
             ],
-            parser: '@babel/eslint-parser',
+            parserOptions: {
+                project: ['./tsconfig.json']
+            },
             env: {
                 node: false,
                 amd: true,
@@ -235,6 +253,8 @@ module.exports = {
                 'Windows': 'readonly'
             },
             rules: {
+                '@typescript-eslint/no-floating-promises': ['warn'],
+                '@typescript-eslint/prefer-string-starts-ends-with': ['error']
             }
         },
         // TypeScript source files
@@ -243,8 +263,6 @@ module.exports = {
                 './src/**/*.ts',
                 './src/**/*.tsx'
             ],
-            parser: '@typescript-eslint/parser',
-            plugins: ['@typescript-eslint'],
             extends: [
                 'eslint:recommended',
                 'plugin:import/typescript',
@@ -255,8 +273,9 @@ module.exports = {
                 'plugin:jsx-a11y/recommended'
             ],
             rules: {
-                'no-useless-constructor': ['off'],
+                '@typescript-eslint/no-floating-promises': ['error'],
-                '@typescript-eslint/no-useless-constructor': ['error']
+
+                'sonarjs/cognitive-complexity': ['error']
             }
         }
     ]

.github/CODEOWNERS

@@ -1,6 +1,2 @@
-.ci             @dkanada @EraYaN
+*               @jellyfin/web
 .github         @jellyfin/core
-fedora          @joshuaboniface
-debian          @joshuaboniface
-.copr           @joshuaboniface
-deployment      @joshuaboniface

.github/workflows/automation.yml

@@ -17,4 +17,5 @@ jobs:
       - uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # tag=v2.1.0
         with:
           dirtyLabel: 'merge conflict'
+          commentOnDirty: 'This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.'
           repoToken: ${{ secrets.JF_BOT_TOKEN }}

.github/workflows/codeql-analysis.yml

@@ -19,13 +19,13 @@ jobs:
         language: [ 'javascript' ]
     steps:
     - name: Checkout repository
-      uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+      uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # tag=v2
+      uses: github/codeql-action/init@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
       with:
         languages: ${{ matrix.language }}
         queries: +security-extended
     - name: Autobuild
-      uses: github/codeql-action/autobuild@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # tag=v2
+      uses: github/codeql-action/autobuild@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # tag=v2
+      uses: github/codeql-action/analyze@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6

.github/workflows/commands.yml

@@ -12,17 +12,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Notify as seen
-        uses: peter-evans/create-or-update-comment@5adcb0bb0f9fb3f95ef05400558bdb3f329ee808 # tag=v2.1.0
+        uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           comment-id: ${{ github.event.comment.id }}
           reactions: '+1'
       - name: Checkout the latest code
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3.1.0
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           fetch-depth: 0
       - name: Automatic Rebase
-        uses: cirrus-actions/rebase@6e572f08c244e2f04f9beb85a943eb618218714d # tag=1.7
+        uses: cirrus-actions/rebase@b87d48154a87a85666003575337e27b8cd65f691 # 1.8
         env:
           GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
+      - name: Comment on failure
+        if: failure()
+        uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
+        with:
+          token: ${{ secrets.JF_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            I'm sorry @${{ github.event.comment.user.login }}, I'm afraid I can't do that.

.github/workflows/lint.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
 
       - name: Setup node environment
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3.5.1
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: 16
           check-latest: true
@@ -24,8 +24,6 @@ jobs:
 
       - name: Install Node.js dependencies
         run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
 
       - name: Run a production build
         run: npm run build:production
@@ -39,10 +37,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
 
       - name: Setup node environment
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3.5.1
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: 16
           check-latest: true
@@ -50,8 +48,6 @@ jobs:
 
       - name: Install Node.js dependencies
         run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
 
       - name: Run eslint
         run: npm run lint
@@ -62,10 +58,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
 
       - name: Setup node environment
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3.5.1
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: 16
           check-latest: true
@@ -76,8 +72,6 @@ jobs:
 
       - name: Install Node.js dependencies
         run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
 
       - name: Run stylelint
         run: npm run stylelint:css
@@ -88,10 +82,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
 
       - name: Setup node environment
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3.5.1
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: 16
           check-latest: true
@@ -102,8 +96,6 @@ jobs:
 
       - name: Install Node.js dependencies
         run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
 
       - name: Run stylelint
         run: npm run stylelint:scss

.github/workflows/repo-stale.yaml

@@ -1,18 +1,24 @@
-name: Issue Stale Check
+name: Stale Check
 
 on:
   schedule:
     - cron: '30 1 * * *'
   workflow_dispatch:
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
-  stale:
+  issues:
+    name: Check issues
     runs-on: ubuntu-latest
     if: ${{ contains(github.repository, 'jellyfin/') }}
     steps:
-      - uses: actions/stale@5ebf00ea0e4c1561e9b43a292ed34424fb1d4578 # tag=v6.0.1
+      - uses: actions/stale@1160a2240286f5da8ec72b1c0816ce2481aabf84 # v8.0.0
         with:
           repo-token: ${{ secrets.JF_BOT_TOKEN }}
+          operations-per-run: 75
           days-before-stale: 120
           days-before-pr-stale: -1
           days-before-close: 21
@@ -25,3 +31,21 @@ jobs:
             If you're the original submitter of this issue, please comment confirming if this issue still affects you in the latest release or master branch, or close the issue if it has been fixed. If you're another user also affected by this bug, please comment confirming so. Either action will remove the stale label.
 
             This bot exists to prevent issues from becoming stale and forgotten. Jellyfin is always moving forward, and bugs are often fixed as side effects of other changes. We therefore ask that bug report authors remain vigilant about their issues to ensure they are closed if fixed, or re-confirmed - perhaps with fresh logs or reproduction examples - regularly. If you have any questions you can reach us on [Matrix or Social Media](https://jellyfin.org/contact).
+
+  prs-conflicts:
+    name: Check PRs with merge conflicts
+    runs-on: ubuntu-latest
+    if: ${{ contains(github.repository, 'jellyfin/') }}
+    steps:
+      - uses: actions/stale@1160a2240286f5da8ec72b1c0816ce2481aabf84 # v8.0.0
+        with:
+          repo-token: ${{ secrets.JF_BOT_TOKEN }}
+          operations-per-run: 75
+          # The merge conflict action will remove the label when updated
+          remove-stale-when-updated: false
+          days-before-stale: -1
+          days-before-close: 90
+          days-before-issue-close: -1
+          stale-pr-label: merge conflict
+          close-pr-message: |-
+            This PR has been closed due to having unresolved merge conflicts.

.github/workflows/tsc.yml

@@ -0,0 +1,29 @@
+name: TypeScript Build Check
+
+on:
+  push:
+    branches: [ master, release* ]
+  pull_request:
+    branches: [ master, release* ]
+
+jobs:
+  tsc:
+    name: Run TypeScript build check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+
+      - name: Setup node environment
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        with:
+          node-version: 16
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run tsc
+        run: npm run build:check

.stylelintrc.json

@@ -13,6 +13,7 @@
     "at-rule-name-case": "lower",
     "at-rule-name-space-after": "always-single-line",
     "at-rule-no-unknown": true,
+    "at-rule-no-vendor-prefix": true,
     "at-rule-semicolon-newline-after": "always",
     "block-closing-brace-empty-line-before": "never",
     "block-closing-brace-newline-after": "always",
@@ -77,6 +78,7 @@
     "media-feature-colon-space-before": "never",
     "media-feature-name-case": "lower",
     "media-feature-name-no-unknown": true,
+    "media-feature-name-no-vendor-prefix": true,
     "media-feature-parentheses-space-inside": "never",
     "media-feature-range-operator-space-after": "always",
     "media-feature-range-operator-space-before": "always",
@@ -103,6 +105,7 @@
         ]
       }
     ],
+    "property-no-vendor-prefix": true,
     "rule-empty-line-before": [ "always-multi-line", {
       "except": ["first-nested"],
       "ignore": ["after-comment"]
@@ -116,6 +119,7 @@
     "selector-list-comma-newline-after": "always",
     "selector-list-comma-space-before": "never",
     "selector-max-empty-lines": 0,
+    "selector-no-vendor-prefix": true,
     "selector-pseudo-class-case": "lower",
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-class-parentheses-space-inside": "never",
@@ -134,6 +138,7 @@
     "string-no-newline": true,
     "unit-case": "lower",
     "unit-no-unknown": true,
+    "value-no-vendor-prefix": true,
     "value-list-comma-newline-after": "always-multi-line",
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",

CONTRIBUTORS.md

@@ -56,6 +56,15 @@
  - [is343](https://github.com/is343)
  - [Meet Pandya](https://github.com/meet-k-pandya)
  - [Peter Spenler](https://github.com/peterspenler)
+ - [Vankerkom](https://github.com/vankerkom)
+ - [edvwib](https://github.com/edvwib)
+ - [Rob Farraher](https://github.com/farraherbg)
+ - [TelepathicWalrus](https://github.com/TelepathicWalrus)
+ - [Pier-Luc Ducharme](https://github.com/pl-ducharme)
+ - [Anantharaju S](https://github.com/Anantharajus)
+ - [Merlin Sievers](https://github.com/dann-merlin)
+ - [Fishbigger](https://github.com/fishbigger)
+ - [sleepycatcoding](https://github.com/sleepycatcoding)
 
 # Emby Contributors
 

README.md

@@ -76,10 +76,14 @@ Jellyfin Web is the frontend used for most of the clients available for end user
 ```
 .
 └── src
+    ├── 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
@@ -88,6 +92,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user
     ├── strings           # Translation files
     ├── styles            # Common app Sass stylesheets
     ├── themes            # CSS themes
+    ├── types             # Common TypeScript interfaces/types
     └── utils             # Utility functions
 ```
 

babel.config.js

@@ -12,14 +12,7 @@ module.exports = {
                 corejs: 3
             }
         ],
-        '@babel/preset-react',
+        '@babel/preset-react'
-        [
-            '@babel/preset-typescript',
-            {
-                isTSX: true,
-                allExtensions: true
-            }
-        ]
     ],
     plugins: [
         '@babel/plugin-proposal-class-properties',

debian/rules

@@ -12,6 +12,7 @@ override_dh_clistrip:
 
 override_dh_auto_build:
 	npm ci --no-audit --unsafe-perm
+	npm run build:production
 	mv $(CURDIR)/dist $(CURDIR)/web
 
 override_dh_auto_clean:

deployment/Dockerfile.centos

@@ -1,4 +1,4 @@
-FROM centos:8
+FROM quay.io/centos/centos:stream8
 
 # Docker build arguments
 ARG SOURCE_DIR=/jellyfin
@@ -12,7 +12,7 @@ ENV IS_DOCKER=YES
 # Prepare CentOS environment
 RUN yum update -y \
   && yum install -y epel-release \
-  && yum install -y @buildsys-build rpmdevtools git yum-plugins-core autoconf automake glibc-devel gcc-c++ make \
+  && yum install -y rpmdevtools git autoconf automake glibc-devel gcc-c++ make \
   && curl -fsSL https://rpm.nodesource.com/setup_16.x | bash - \
   && yum install -y nodejs
 

deployment/Dockerfile.docker

@@ -8,4 +8,6 @@ RUN apk add autoconf g++ make libpng-dev gifsicle alpine-sdk automake libtool ma
 WORKDIR ${SOURCE_DIR}
 COPY . .
 
-RUN npm ci --no-audit --unsafe-perm && mv dist ${ARTIFACT_DIR}
+RUN npm ci --no-audit --unsafe-perm \
+ && npm run build:production \
+ && mv dist ${ARTIFACT_DIR}

deployment/Dockerfile.fedora

@@ -1,4 +1,4 @@
-FROM fedora:37
+FROM fedora:39
 
 # Docker build arguments
 ARG SOURCE_DIR=/jellyfin

deployment/build.portable

@@ -15,6 +15,7 @@ fi
 
 # build archives
 npm ci --no-audit --unsafe-perm
+npm run build:production
 mv dist jellyfin-web_${version}
 tar -czf jellyfin-web_${version}_portable.tar.gz jellyfin-web_${version}
 rm -rf dist

fedora/jellyfin-web.spec

@@ -35,6 +35,7 @@ chown root:root -R .
 
 %build
 npm ci --no-audit --unsafe-perm
+npm run build:production
 
 
 %install

package.json

@@ -5,106 +5,110 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "7.19.3",
+    "@babel/core": "7.21.8",
-    "@babel/eslint-parser": "7.19.1",
-    "@babel/eslint-plugin": "7.19.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-transform-modules-umd": "7.18.6",
-    "@babel/preset-env": "7.19.4",
+    "@babel/preset-env": "7.21.5",
     "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
     "@types/escape-html": "1.0.2",
-    "@types/lodash-es": "4.17.6",
+    "@types/loadable__component": "5.13.4",
-    "@types/react": "17.0.51",
+    "@types/lodash-es": "4.17.7",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "17.0.59",
-    "@typescript-eslint/eslint-plugin": "5.41.0",
+    "@types/react-dom": "17.0.20",
-    "@typescript-eslint/parser": "5.41.0",
+    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/parser": "5.59.7",
     "@uupaa/dynamic-import-polyfill": "1.0.2",
-    "autoprefixer": "10.4.12",
+    "autoprefixer": "10.4.14",
-    "babel-loader": "8.2.5",
+    "babel-loader": "9.1.2",
     "babel-plugin-dynamic-import-polyfill": "1.0.0",
     "clean-webpack-plugin": "4.0.0",
     "confusing-browser-globals": "1.0.11",
     "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.1",
+    "css-loader": "6.7.4",
-    "cssnano": "5.1.13",
+    "cssnano": "6.0.1",
-    "es-check": "7.0.1",
+    "es-check": "7.1.1",
-    "eslint": "8.26.0",
+    "eslint": "8.41.0",
-    "eslint-plugin-compat": "4.0.2",
+    "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.31.10",
+    "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-sonarjs": "0.16.0",
+    "eslint-plugin-sonarjs": "0.19.0",
-    "expose-loader": "4.0.0",
+    "expose-loader": "4.1.0",
     "html-loader": "4.2.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-webpack-plugin": "5.5.1",
-    "mini-css-extract-plugin": "2.6.1",
+    "mini-css-extract-plugin": "2.7.6",
-    "postcss": "8.4.18",
+    "postcss": "8.4.24",
-    "postcss-loader": "7.0.1",
+    "postcss-loader": "7.3.1",
-    "postcss-preset-env": "7.8.2",
+    "postcss-preset-env": "8.4.1",
-    "postcss-scss": "4.0.5",
+    "postcss-scss": "4.0.6",
-    "sass": "1.55.0",
+    "sass": "1.62.1",
-    "sass-loader": "13.1.0",
+    "sass-loader": "13.3.0",
     "source-map-loader": "4.0.1",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.3",
-    "stylelint": "14.14.0",
+    "stylelint": "15.6.2",
     "stylelint-config-rational-order": "0.1.2",
     "stylelint-no-browser-hacks": "1.2.1",
-    "stylelint-order": "5.0.0",
+    "stylelint-order": "6.0.3",
-    "stylelint-scss": "4.3.0",
+    "stylelint-scss": "5.0.0",
-    "ts-loader": "9.4.1",
+    "ts-loader": "9.4.3",
-    "typescript": "4.8.4",
+    "typescript": "5.0.4",
-    "webpack": "5.74.0",
+    "webpack": "5.84.1",
-    "webpack-cli": "4.10.0",
+    "webpack-cli": "5.1.1",
-    "webpack-dev-server": "4.11.1",
+    "webpack-dev-server": "4.15.0",
-    "webpack-merge": "5.8.0",
+    "webpack-merge": "5.9.0",
     "workbox-webpack-plugin": "6.5.4",
     "worker-loader": "3.0.8"
   },
   "dependencies": {
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
     "@fontsource/noto-sans": "4.5.11",
     "@fontsource/noto-sans-hk": "4.5.12",
     "@fontsource/noto-sans-jp": "4.5.12",
     "@fontsource/noto-sans-kr": "4.5.12",
     "@fontsource/noto-sans-sc": "4.5.12",
     "@fontsource/noto-sans-tc": "4.5.12",
-    "@jellyfin/libass-wasm": "4.1.1",
+    "@jellyfin/sdk": "unstable",
-    "@jellyfin/sdk": "0.7.0",
+    "@loadable/component": "5.15.3",
-    "blurhash": "2.0.3",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.13.3",
+    "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.3.2",
-    "core-js": "3.26.0",
+    "core-js": "3.30.2",
-    "date-fns": "2.29.3",
+    "date-fns": "2.30.0",
-    "dompurify": "2.4.0",
+    "dompurify": "3.0.1",
-    "epubjs": "0.4.2",
+    "epubjs": "0.3.93",
     "escape-html": "1.0.3",
+    "event-target-polyfill": "github:ThaUnknown/event-target-polyfill",
     "fast-text-encoding": "1.0.6",
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
-    "hls.js": "0.14.17",
+    "hls.js": "1.4.4",
     "intersection-observer": "0.12.2",
+    "jassub": "1.7.1",
     "jellyfin-apiclient": "1.10.0",
-    "jquery": "3.6.1",
+    "jquery": "3.7.0",
-    "jstree": "3.3.12",
+    "jstree": "3.3.15",
     "libarchive.js": "1.3.0",
     "lodash-es": "4.17.21",
-    "marked": "4.1.1",
+    "marked": "4.3.0",
     "material-design-icons-iconfont": "6.7.0",
     "native-promise-only": "0.8.1",
-    "pdfjs-dist": "2.16.105",
+    "pdfjs-dist": "3.6.172",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-router-dom": "6.4.2",
+    "react-router-dom": "6.11.1",
     "resize-observer-polyfill": "1.5.1",
     "screenfull": "6.0.2",
     "sortablejs": "1.15.0",
-    "swiper": "8.4.4",
+    "swiper": "9.3.2",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.2",
     "workbox-core": "6.5.4",
@@ -129,9 +133,9 @@
   "scripts": {
     "start": "npm run serve",
     "serve": "webpack serve --config webpack.dev.js",
-    "prepare": "node ./scripts/prepare.js",
+    "build:development": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.dev.js",
-    "build:development": "webpack --config webpack.dev.js",
+    "build:production": "cross-env NODE_ENV=\"production\" NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.prod.js",
-    "build:production": "cross-env NODE_ENV=\"production\" webpack --config webpack.prod.js",
+    "build:check": "tsc --noEmit",
     "escheck": "es-check",
     "lint": "eslint \"./\"",
     "stylelint": "npm run stylelint:css && npm run stylelint:scss",

scripts/prepare.js

@@ -1,12 +0,0 @@
-const { execSync } = require('child_process');
-
-/**
- * The npm `prepare` script needs to run a build to support installing
- * a package from git repositories (this is dumb but a limitation of how
- * npm behaves). We don't want to run these in CI though because
- * building is slow so this script will skip the build when the
- * `SKIP_PREPARE` environment variable has been set.
- */
-if (!process.env.SKIP_PREPARE) {
-    execSync('webpack --config webpack.prod.js', { stdio: 'inherit' });
-}

src/RootApp.tsx

@@ -0,0 +1,30 @@
+import loadable from '@loadable/component';
+import { History } from '@remix-run/router';
+import React from 'react';
+
+import StableApp from './apps/stable/App';
+import { HistoryRouter } from './components/router/HistoryRouter';
+import { ApiProvider } from './hooks/useApi';
+import { WebConfigProvider } from './hooks/useWebConfig';
+
+const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
+
+const RootApp = ({ history }: { history: History }) => {
+    const layoutMode = localStorage.getItem('layout');
+
+    return (
+        <ApiProvider>
+            <WebConfigProvider>
+                <HistoryRouter history={history}>
+                    {
+                        layoutMode === 'experimental' ?
+                            <ExperimentalApp /> :
+                            <StableApp />
+                    }
+                </HistoryRouter>
+            </WebConfigProvider>
+        </ApiProvider>
+    );
+};
+
+export default RootApp;

src/apiclient.d.ts

@@ -117,6 +117,7 @@ declare module 'jellyfin-apiclient' {
         getCountries(): Promise<CountryInfo[]>;
         getCriticReviews(itemId: string, options?: any): Promise<BaseItemDtoQueryResult>;
         getCultures(): Promise<CultureDto[]>;
+        getCurrentUser(cache?: boolean): Promise<UserDto>;
         getCurrentUserId(): string;
         getDateParamValue(date: Date): string;
         getDefaultImageQuality(imageType: ImageType): number;
@@ -267,7 +268,7 @@ declare module 'jellyfin-apiclient' {
         sendWebSocketMessage(name: string, data: any): void;
         serverAddress(val?: string): string;
         serverId(): string;
-        serverVersion(): string
+        serverVersion(): string;
         setAuthenticationInfo(accessKey?: string, userId?: string): void;
         setRequestHeaders(headers: any): void;
         setSystemInfo(info: SystemInfo): void;

src/apps/experimental/App.tsx

@@ -0,0 +1,44 @@
+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 'components/router/AsyncRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
+
+import AppLayout from './AppLayout';
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
+import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+
+const ExperimentalApp = () => {
+    return (
+        <Routes>
+            <Route path='/*' element={<AppLayout />}>
+                {/* User routes */}
+                <Route element={<ConnectionRequired />}>
+                    {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
+                    {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
+                </Route>
+
+                {/* Admin routes */}
+                <Route element={<ConnectionRequired isAdminRequired />}>
+                    {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                    {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
+
+                    <Route path='configurationpage' element={
+                        <ServerContentPage view='/web/configurationpage' />
+                    } />
+                </Route>
+
+                {/* Public routes */}
+                <Route element={<ConnectionRequired isUserRequired={false} />}>
+                    <Route index element={<Navigate replace to='/home.html' />} />
+
+                    {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
+                </Route>
+            </Route>
+        </Routes>
+    );
+};
+
+export default ExperimentalApp;

src/apps/experimental/AppLayout.tsx

@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import { useApi } from 'hooks/useApi';
+import { useLocalStorage } from 'hooks/useLocalStorage';
+
+import AppToolbar from './components/AppToolbar';
+import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
+import ElevationScroll from './components/ElevationScroll';
+import theme from './theme';
+
+import './AppOverrides.scss';
+
+interface ExperimentalAppSettings {
+    isDrawerPinned: boolean
+}
+
+const DEFAULT_EXPERIMENTAL_APP_SETTINGS: ExperimentalAppSettings = {
+    isDrawerPinned: false
+};
+
+const AppLayout = () => {
+    const [ appSettings, setAppSettings ] = useLocalStorage<ExperimentalAppSettings>('ExperimentalAppSettings', DEFAULT_EXPERIMENTAL_APP_SETTINGS);
+    const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
+    const { user } = useApi();
+    const location = useLocation();
+
+    const isDrawerAvailable = isDrawerPath(location.pathname);
+    const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
+
+    useEffect(() => {
+        if (isDrawerActive !== appSettings.isDrawerPinned) {
+            setAppSettings({
+                ...appSettings,
+                isDrawerPinned: isDrawerActive
+            });
+        }
+    }, [ appSettings, isDrawerActive, setAppSettings ]);
+
+    const onToggleDrawer = useCallback(() => {
+        setIsDrawerActive(!isDrawerActive);
+    }, [ isDrawerActive, setIsDrawerActive ]);
+
+    return (
+        <ThemeProvider theme={theme}>
+            <Backdrop />
+
+            <div style={{ display: 'none' }}>
+                {/*
+                  * TODO: These components are not used, but views interact with them directly so the need to be
+                  * present in the dom. We add them in a hidden element to prevent errors.
+                  */}
+                <AppHeader />
+            </div>
+
+            <Box sx={{ display: 'flex' }}>
+                <ElevationScroll elevate={isDrawerOpen}>
+                    <AppBar
+                        position='fixed'
+                        sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
+                    >
+                        <AppToolbar
+                            isDrawerOpen={isDrawerOpen}
+                            onDrawerButtonClick={onToggleDrawer}
+                        />
+                    </AppBar>
+                </ElevationScroll>
+
+                <AppDrawer
+                    open={isDrawerOpen}
+                    onClose={onToggleDrawer}
+                    onOpen={onToggleDrawer}
+                />
+
+                <Box
+                    component='main'
+                    sx={{
+                        width: '100%',
+                        flexGrow: 1,
+                        transition: theme.transitions.create('margin', {
+                            easing: theme.transitions.easing.sharp,
+                            duration: theme.transitions.duration.leavingScreen
+                        }),
+                        marginLeft: 0,
+                        ...(isDrawerAvailable && {
+                            marginLeft: {
+                                sm: `-${DRAWER_WIDTH}px`
+                            }
+                        }),
+                        ...(isDrawerActive && {
+                            transition: theme.transitions.create('margin', {
+                                easing: theme.transitions.easing.easeOut,
+                                duration: theme.transitions.duration.enteringScreen
+                            }),
+                            marginLeft: 0
+                        })
+                    }}
+                >
+                    <div className='mainAnimatedPages skinBody' />
+                    <div className='skinBody'>
+                        <Outlet />
+                    </div>
+                </Box>
+            </Box>
+        </ThemeProvider>
+    );
+};
+
+export default AppLayout;

src/apps/experimental/AppOverrides.scss

@@ -0,0 +1,40 @@
+// Default MUI breakpoints
+// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
+$mui-bp-sm: 600px;
+$mui-bp-md: 900px;
+$mui-bp-lg: 1200px;
+$mui-bp-xl: 1536px;
+
+// Fix main pages layout to work with drawer
+.mainAnimatedPage {
+    position: relative;
+}
+
+// Fix dashboard pages layout to work with drawer
+.dashboardDocument .skinBody {
+    position: unset;
+}
+
+// Hide some items from the user "settings" page that are in the drawer
+#myPreferencesMenuPage {
+    .lnkQuickConnectPreferences,
+    .adminSection,
+    .userSection {
+        display: none !important;
+    }
+}
+
+// Fix the padding of some pages
+.homePage.libraryPage, // Home page
+.libraryPage:not(.withTabs), // Tabless library pages
+.content-primary.content-primary { // Dashboard pages
+    padding-top: 3.25rem !important;
+}
+
+.libraryPage.withTabs {
+    padding-top: 6.5rem !important;
+
+    @media all and (min-width: $mui-bp-lg) {
+        padding-top: 3.25rem !important;
+    }
+}

src/apps/experimental/components/AppToolbar/RemotePlayButton.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import CastConnected from '@mui/icons-material/CastConnected';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Cast from '@mui/icons-material/Cast';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'scripts/globalize';
+import Events from 'utils/events';
+
+import RemotePlayMenu, { ID } from './menus/RemotePlayMenu';
+import RemotePlayActiveMenu, { ID as ACTIVE_ID } from './menus/RemotePlayActiveMenu';
+
+const RemotePlayButton = () => {
+    const theme = useTheme();
+    const [ playerInfo, setPlayerInfo ] = useState(playbackManager.getPlayerInfo());
+
+    const updatePlayerInfo = useCallback(() => {
+        setPlayerInfo(playbackManager.getPlayerInfo());
+    }, [ setPlayerInfo ]);
+
+    useEffect(() => {
+        Events.on(playbackManager, 'playerchange', updatePlayerInfo);
+
+        return () => {
+            Events.off(playbackManager, 'playerchange', updatePlayerInfo);
+        };
+    }, [ updatePlayerInfo ]);
+
+    const [ remotePlayMenuAnchorEl, setRemotePlayMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isRemotePlayMenuOpen = Boolean(remotePlayMenuAnchorEl);
+
+    const onRemotePlayButtonClick = useCallback((event) => {
+        setRemotePlayMenuAnchorEl(event.currentTarget);
+    }, [ setRemotePlayMenuAnchorEl ]);
+
+    const onRemotePlayMenuClose = useCallback(() => {
+        setRemotePlayMenuAnchorEl(null);
+    }, [ setRemotePlayMenuAnchorEl ]);
+
+    const [ remotePlayActiveMenuAnchorEl, setRemotePlayActiveMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isRemotePlayActiveMenuOpen = Boolean(remotePlayActiveMenuAnchorEl);
+
+    const onRemotePlayActiveButtonClick = useCallback((event) => {
+        setRemotePlayActiveMenuAnchorEl(event.currentTarget);
+    }, [ setRemotePlayActiveMenuAnchorEl ]);
+
+    const onRemotePlayActiveMenuClose = useCallback(() => {
+        setRemotePlayActiveMenuAnchorEl(null);
+    }, [ setRemotePlayActiveMenuAnchorEl ]);
+
+    return (
+        <>
+            {(playerInfo && !playerInfo.isLocalPlayer) ? (
+                <Box
+                    sx={{
+                        alignSelf: 'center'
+                    }}
+                >
+                    <Tooltip title={globalize.translate('ButtonCast')}>
+                        <Button
+                            variant='text'
+                            size='large'
+                            startIcon={<CastConnected />}
+                            aria-label={globalize.translate('ButtonCast')}
+                            aria-controls={ACTIVE_ID}
+                            aria-haspopup='true'
+                            onClick={onRemotePlayActiveButtonClick}
+                            color='inherit'
+                            sx={{
+                                color: theme.palette.primary.main
+                            }}
+                        >
+                            {playerInfo.deviceName || playerInfo.name}
+                        </Button>
+                    </Tooltip>
+                </Box>
+            ) : (
+                <Tooltip title={globalize.translate('ButtonCast')}>
+                    <IconButton
+                        size='large'
+                        aria-label={globalize.translate('ButtonCast')}
+                        aria-controls={ID}
+                        aria-haspopup='true'
+                        onClick={onRemotePlayButtonClick}
+                        color='inherit'
+                    >
+                        <Cast />
+                    </IconButton>
+                </Tooltip>
+            )}
+
+            <RemotePlayMenu
+                open={isRemotePlayMenuOpen}
+                anchorEl={remotePlayMenuAnchorEl}
+                onMenuClose={onRemotePlayMenuClose}
+            />
+
+            <RemotePlayActiveMenu
+                open={isRemotePlayActiveMenuOpen}
+                anchorEl={remotePlayActiveMenuAnchorEl}
+                onMenuClose={onRemotePlayActiveMenuClose}
+                playerInfo={playerInfo}
+            />
+        </>
+    );
+};
+
+export default RemotePlayButton;

src/apps/experimental/components/AppToolbar/UserMenuButton.tsx

@@ -0,0 +1,64 @@
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback, useState } from 'react';
+
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+
+import AppUserMenu, { ID } from './menus/AppUserMenu';
+
+const UserMenuButton = () => {
+    const theme = useTheme();
+    const { api, user } = useApi();
+
+    const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isUserMenuOpen = Boolean(userMenuAnchorEl);
+
+    const onUserButtonClick = useCallback((event) => {
+        setUserMenuAnchorEl(event.currentTarget);
+    }, [ setUserMenuAnchorEl ]);
+
+    const onUserMenuClose = useCallback(() => {
+        setUserMenuAnchorEl(null);
+    }, [ setUserMenuAnchorEl ]);
+
+    return (
+        <>
+            <Tooltip title={globalize.translate('UserMenu')}>
+                <IconButton
+                    size='large'
+                    edge='end'
+                    aria-label={globalize.translate('UserMenu')}
+                    aria-controls={ID}
+                    aria-haspopup='true'
+                    onClick={onUserButtonClick}
+                    color='inherit'
+                    sx={{ padding: 0 }}
+                >
+                    <Avatar
+                        alt={user?.Name || undefined}
+                        src={
+                            api && user?.Id ?
+                                `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
+                                undefined
+                        }
+                        sx={{
+                            bgcolor: theme.palette.primary.dark,
+                            color: 'inherit'
+                        }}
+                    />
+                </IconButton>
+            </Tooltip>
+
+            <AppUserMenu
+                open={isUserMenuOpen}
+                anchorEl={userMenuAnchorEl}
+                onMenuClose={onUserMenuClose}
+            />
+        </>
+    );
+};
+
+export default UserMenuButton;

src/apps/experimental/components/AppToolbar/index.tsx

@@ -0,0 +1,117 @@
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import React, { FC } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import appIcon from 'assets/img/icon-transparent.png';
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+
+import AppTabs from '../tabs/AppTabs';
+import { isDrawerPath } from '../drawers/AppDrawer';
+import UserMenuButton from './UserMenuButton';
+import RemotePlayButton from './RemotePlayButton';
+
+interface AppToolbarProps {
+    isDrawerOpen: boolean
+    onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
+}
+
+const AppToolbar: FC<AppToolbarProps> = ({
+    isDrawerOpen,
+    onDrawerButtonClick
+}) => {
+    const { user } = useApi();
+    const isUserLoggedIn = Boolean(user);
+    const location = useLocation();
+
+    const isDrawerAvailable = isDrawerPath(location.pathname);
+
+    return (
+        <Toolbar
+            variant='dense'
+            sx={{
+                flexWrap: {
+                    xs: 'wrap',
+                    lg: 'nowrap'
+                }
+            }}
+        >
+            {isUserLoggedIn && isDrawerAvailable && (
+                <Tooltip title={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}>
+                    <IconButton
+                        size='large'
+                        edge='start'
+                        color='inherit'
+                        aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}
+                        sx={{ mr: 2 }}
+                        onClick={onDrawerButtonClick}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                </Tooltip>
+            )}
+
+            <Box
+                component={Link}
+                to='/'
+                color='inherit'
+                aria-label={globalize.translate('Home')}
+                sx={{
+                    display: 'inline-flex',
+                    textDecoration: 'none'
+                }}
+            >
+                <Box
+                    component='img'
+                    src={appIcon}
+                    sx={{
+                        height: '2rem',
+                        marginInlineEnd: 1
+                    }}
+                />
+                <Typography
+                    variant='h6'
+                    noWrap
+                    component='div'
+                    sx={{ display: { xs: 'none', sm: 'inline-block' } }}
+                >
+                    Jellyfin
+                </Typography>
+            </Box>
+
+            <AppTabs isDrawerOpen={isDrawerOpen} />
+
+            {isUserLoggedIn && (
+                <>
+                    <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>
+                        <RemotePlayButton />
+
+                        <Tooltip title={globalize.translate('Search')}>
+                            <IconButton
+                                size='large'
+                                aria-label={globalize.translate('Search')}
+                                color='inherit'
+                                component={Link}
+                                to='/search.html'
+                            >
+                                <SearchIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+
+                    <Box sx={{ flexGrow: 0 }}>
+                        <UserMenuButton />
+                    </Box>
+                </>
+            )}
+        </Toolbar>
+    );
+};
+
+export default AppToolbar;

src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx

@@ -0,0 +1,165 @@
+import { AppSettingsAlt, Close } from '@mui/icons-material';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import Logout from '@mui/icons-material/Logout';
+import PhonelinkLock from '@mui/icons-material/PhonelinkLock';
+import Settings from '@mui/icons-material/Settings';
+import Storage from '@mui/icons-material/Storage';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu, { MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import React, { FC, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+
+import { appHost } from 'components/apphost';
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+import Dashboard from 'utils/dashboard';
+
+export const ID = 'app-user-menu';
+
+interface AppUserMenuProps extends MenuProps {
+    onMenuClose: () => void
+}
+
+const AppUserMenu: FC<AppUserMenuProps> = ({
+    anchorEl,
+    open,
+    onMenuClose
+}) => {
+    const { user } = useApi();
+
+    const onClientSettingsClick = useCallback(() => {
+        window.NativeShell?.openClientSettings();
+        onMenuClose();
+    }, [ onMenuClose ]);
+
+    const onExitAppClick = useCallback(() => {
+        appHost.exit();
+        onMenuClose();
+    }, [ onMenuClose ]);
+
+    const onLogoutClick = useCallback(() => {
+        Dashboard.logout();
+        onMenuClose();
+    }, [ onMenuClose ]);
+
+    const onSelectServerClick = useCallback(() => {
+        Dashboard.selectServer();
+        onMenuClose();
+    }, [ onMenuClose ]);
+
+    return (
+        <Menu
+            anchorEl={anchorEl}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+            }}
+            id={ID}
+            keepMounted
+            open={open}
+            onClose={onMenuClose}
+        >
+            <MenuItem
+                component={Link}
+                to={`/userprofile.html?userId=${user?.Id}`}
+                onClick={onMenuClose}
+            >
+                <ListItemIcon>
+                    <AccountCircle />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('Profile')}
+                </ListItemText>
+            </MenuItem>
+            <MenuItem
+                component={Link}
+                to='/mypreferencesmenu.html'
+                onClick={onMenuClose}
+            >
+                <ListItemIcon>
+                    <Settings />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('Settings')}
+                </ListItemText>
+            </MenuItem>
+
+            {appHost.supports('clientsettings') && ([
+                <Divider key='client-settings-divider' />,
+                <MenuItem
+                    key='client-settings-button'
+                    onClick={onClientSettingsClick}
+                >
+                    <ListItemIcon>
+                        <AppSettingsAlt />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('ClientSettings')}
+                    </ListItemText>
+                </MenuItem>
+            ])}
+
+            <Divider />
+            <MenuItem
+                component={Link}
+                to='/mypreferencesquickconnect.html'
+                onClick={onMenuClose}
+            >
+                <ListItemIcon>
+                    <PhonelinkLock />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('QuickConnect')}
+                </ListItemText>
+            </MenuItem>
+
+            {appHost.supports('multiserver') && (
+                <MenuItem
+                    onClick={onSelectServerClick}
+                >
+                    <ListItemIcon>
+                        <Storage />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('SelectServer')}
+                    </ListItemText>
+                </MenuItem>
+            )}
+
+            <MenuItem
+                onClick={onLogoutClick}
+            >
+                <ListItemIcon>
+                    <Logout />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('ButtonSignOut')}
+                </ListItemText>
+            </MenuItem>
+
+            {appHost.supports('exitmenu') && ([
+                <Divider key='exit-menu-divider' />,
+                <MenuItem
+                    key='exit-menu-button'
+                    onClick={onExitAppClick}
+                >
+                    <ListItemIcon>
+                        <Close />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('ButtonExitApp')}
+                    </ListItemText>
+                </MenuItem>
+            ])}
+        </Menu>
+    );
+};
+
+export default AppUserMenu;

src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx

@@ -0,0 +1,160 @@
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import SettingsRemote from '@mui/icons-material/SettingsRemote';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import Menu, { MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import dialog from 'components/dialog/dialog';
+import { playbackManager } from 'components/playback/playbackmanager';
+import React, { FC, useCallback, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { enable, isEnabled, supported } from 'scripts/autocast';
+import globalize from 'scripts/globalize';
+
+interface RemotePlayActiveMenuProps extends MenuProps {
+    onMenuClose: () => void
+    playerInfo: {
+        name: string
+        isLocalPlayer: boolean
+        id?: string
+        deviceName?: string
+        playableMediaTypes?: string[]
+        supportedCommands?: string[]
+    } | null
+}
+
+export const ID = 'app-remote-play-active-menu';
+
+const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
+    anchorEl,
+    open,
+    onMenuClose,
+    playerInfo
+}) => {
+    const [ isDisplayMirrorEnabled, setIsDisplayMirrorEnabled ] = useState(playbackManager.enableDisplayMirroring());
+    const isDisplayMirrorSupported = playerInfo?.supportedCommands && playerInfo.supportedCommands.indexOf('DisplayContent') !== -1;
+    const toggleDisplayMirror = useCallback(() => {
+        playbackManager.enableDisplayMirroring(!isDisplayMirrorEnabled);
+        setIsDisplayMirrorEnabled(!isDisplayMirrorEnabled);
+    }, [ isDisplayMirrorEnabled, setIsDisplayMirrorEnabled ]);
+
+    const [ isAutoCastEnabled, setIsAutoCastEnabled ] = useState(isEnabled());
+    const isAutoCastSupported = supported();
+    const toggleAutoCast = useCallback(() => {
+        enable(!isAutoCastEnabled);
+        setIsAutoCastEnabled(!isAutoCastEnabled);
+    }, [ isAutoCastEnabled, setIsAutoCastEnabled ]);
+
+    const remotePlayerName = playerInfo?.deviceName || playerInfo?.name;
+
+    const disconnectRemotePlayer = useCallback(() => {
+        if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
+            dialog.show({
+                buttons: [
+                    {
+                        name: globalize.translate('Yes'),
+                        id: 'yes'
+                    }, {
+                        name: globalize.translate('No'),
+                        id: 'no'
+                    }
+                ],
+                text: globalize.translate('ConfirmEndPlayerSession', remotePlayerName)
+            }).then(id => {
+                onMenuClose();
+
+                if (id === 'yes') {
+                    playbackManager.getCurrentPlayer().endSession();
+                }
+                playbackManager.setDefaultPlayerActive();
+            }).catch(() => {
+            // Dialog closed
+            });
+        } else {
+            onMenuClose();
+            playbackManager.setDefaultPlayerActive();
+        }
+    }, [ onMenuClose, remotePlayerName ]);
+
+    return (
+        <Menu
+            anchorEl={anchorEl}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+            }}
+            id={ID}
+            keepMounted
+            open={open}
+            onClose={onMenuClose}
+            MenuListProps={{
+                'aria-labelledby': 'remote-play-active-subheader',
+                subheader: (
+                    <ListSubheader component='div' id='remote-play-active-subheader'>
+                        {remotePlayerName}
+                    </ListSubheader>
+                )
+            }}
+        >
+            {isDisplayMirrorSupported && (
+                <MenuItem onClick={toggleDisplayMirror}>
+                    {isDisplayMirrorEnabled && (
+                        <ListItemIcon>
+                            <Check />
+                        </ListItemIcon>
+                    )}
+                    <ListItemText inset={!isDisplayMirrorEnabled}>
+                        {globalize.translate('EnableDisplayMirroring')}
+                    </ListItemText>
+                </MenuItem>
+            )}
+
+            {isAutoCastSupported && (
+                <MenuItem onClick={toggleAutoCast}>
+                    {isAutoCastEnabled && (
+                        <ListItemIcon>
+                            <Check />
+                        </ListItemIcon>
+                    )}
+                    <ListItemText inset={!isAutoCastEnabled}>
+                        {globalize.translate('EnableAutoCast')}
+                    </ListItemText>
+                </MenuItem>
+            )}
+
+            {(isDisplayMirrorSupported || isAutoCastSupported) && <Divider />}
+
+            <MenuItem
+                component={Link}
+                to='/queue'
+                onClick={onMenuClose}
+            >
+                <ListItemIcon>
+                    <SettingsRemote />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('HeaderRemoteControl')}
+                </ListItemText>
+            </MenuItem>
+            <Divider />
+            <MenuItem onClick={disconnectRemotePlayer}>
+                <ListItemIcon>
+                    <Close />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('Disconnect')}
+                </ListItemText>
+            </MenuItem>
+        </Menu>
+    );
+};
+
+export default RemotePlayActiveMenu;

src/apps/experimental/components/AppToolbar/menus/RemotePlayMenu.tsx

@@ -0,0 +1,100 @@
+import Warning from '@mui/icons-material/Warning';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import React, { FC, useEffect, useState } from 'react';
+
+import globalize from 'scripts/globalize';
+import { playbackManager } from 'components/playback/playbackmanager';
+import { pluginManager } from 'components/pluginManager';
+import type { PlayTarget } from 'types/playTarget';
+
+import PlayTargetIcon from '../../PlayTargetIcon';
+
+interface RemotePlayMenuProps extends MenuProps {
+    onMenuClose: () => void
+}
+
+export const ID = 'app-remote-play-menu';
+
+const RemotePlayMenu: FC<RemotePlayMenuProps> = ({
+    anchorEl,
+    open,
+    onMenuClose
+}) => {
+    // TODO: Add other checks for support (Android app, secure context, etc)
+    const isChromecastPluginLoaded = !!pluginManager.plugins.find(plugin => plugin.id === 'chromecast');
+
+    const [ playbackTargets, setPlaybackTargets ] = useState<PlayTarget[]>([]);
+
+    const onPlayTargetClick = (target: PlayTarget) => {
+        playbackManager.trySetActivePlayer(target.playerName, target);
+        onMenuClose();
+    };
+
+    useEffect(() => {
+        const fetchPlaybackTargets = async () => {
+            setPlaybackTargets(
+                await playbackManager.getTargets()
+            );
+        };
+
+        if (open) {
+            fetchPlaybackTargets()
+                .catch(err => {
+                    console.error('[AppRemotePlayMenu] unable to get playback targets', err);
+                });
+        }
+    }, [ open, setPlaybackTargets ]);
+
+    return (
+        <Menu
+            anchorEl={anchorEl}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+            }}
+            id={ID}
+            keepMounted
+            open={open}
+            onClose={onMenuClose}
+        >
+            {!isChromecastPluginLoaded && ([
+                <MenuItem key='cast-unsupported-item' disabled>
+                    <ListItemIcon>
+                        <Warning />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('GoogleCastUnsupported')}
+                    </ListItemText>
+                </MenuItem>,
+                <Divider key='cast-unsupported-divider' />
+            ])}
+
+            {playbackTargets.map(target => (
+                <MenuItem
+                    key={target.id}
+                    // Since we are looping over targets there is no good way to avoid creating a new function here
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={() => onPlayTargetClick(target)}
+                >
+                    <ListItemIcon>
+                        <PlayTargetIcon target={target} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={ target.appName ? `${target.name} - ${target.appName}` : target.name }
+                        secondary={ target.user?.Name }
+                    />
+                </MenuItem>
+            ))}
+        </Menu>
+    );
+};
+
+export default RemotePlayMenu;

src/apps/experimental/components/ElevationScroll.tsx

@@ -0,0 +1,21 @@
+import useScrollTrigger from '@mui/material/useScrollTrigger';
+import React, { ReactElement } from 'react';
+
+/**
+ * Component that changes the elevation of a child component when scrolled.
+ */
+const ElevationScroll = ({ children, elevate = false }: { children: ReactElement, elevate?: boolean }) => {
+    const trigger = useScrollTrigger({
+        disableHysteresis: true,
+        threshold: 0
+    });
+
+    const isElevated = elevate || trigger;
+
+    return React.cloneElement(children, {
+        color: isElevated ? 'primary' : 'transparent',
+        elevation: isElevated ? 4 : 0
+    });
+};
+
+export default ElevationScroll;

src/apps/experimental/components/LibraryIcon.tsx

@@ -0,0 +1,50 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import Movie from '@mui/icons-material/Movie';
+import MusicNote from '@mui/icons-material/MusicNote';
+import Photo from '@mui/icons-material/Photo';
+import LiveTv from '@mui/icons-material/LiveTv';
+import Tv from '@mui/icons-material/Tv';
+import Theaters from '@mui/icons-material/Theaters';
+import MusicVideo from '@mui/icons-material/MusicVideo';
+import Book from '@mui/icons-material/Book';
+import Collections from '@mui/icons-material/Collections';
+import Queue from '@mui/icons-material/Queue';
+import Folder from '@mui/icons-material/Folder';
+import React, { FC } from 'react';
+import { CollectionType } from 'types/collectionType';
+
+interface LibraryIconProps {
+    item: BaseItemDto
+}
+
+const LibraryIcon: FC<LibraryIconProps> = ({
+    item
+}) => {
+    switch (item.CollectionType) {
+        case CollectionType.Movies:
+            return <Movie />;
+        case CollectionType.Music:
+            return <MusicNote />;
+        case CollectionType.HomeVideos:
+        case CollectionType.Photos:
+            return <Photo />;
+        case CollectionType.LiveTv:
+            return <LiveTv />;
+        case CollectionType.TvShows:
+            return <Tv />;
+        case CollectionType.Trailers:
+            return <Theaters />;
+        case CollectionType.MusicVideos:
+            return <MusicVideo />;
+        case CollectionType.Books:
+            return <Book />;
+        case CollectionType.BoxSets:
+            return <Collections />;
+        case CollectionType.Playlists:
+            return <Queue />;
+        default:
+            return <Folder />;
+    }
+};
+
+export default LibraryIcon;

src/apps/experimental/components/PlayTargetIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Cast from '@mui/icons-material/Cast';
+import Computer from '@mui/icons-material/Computer';
+import Devices from '@mui/icons-material/Devices';
+import Smartphone from '@mui/icons-material/Smartphone';
+import Tablet from '@mui/icons-material/Tablet';
+import Tv from '@mui/icons-material/Tv';
+
+import browser from 'scripts/browser';
+import type { PlayTarget } from 'types/playTarget';
+
+const PlayTargetIcon = ({ target }: { target: PlayTarget }) => {
+    if (!target.deviceType && target.isLocalPlayer) {
+        if (browser.tv) {
+            return <Tv />;
+        } else if (browser.mobile) {
+            return <Smartphone />;
+        }
+        return <Computer />;
+    }
+
+    switch (target.deviceType) {
+        case 'smartphone':
+            return <Smartphone />;
+        case 'tablet':
+            return <Tablet />;
+        case 'desktop':
+            return <Computer />;
+        case 'cast':
+            return <Cast />;
+        case 'tv':
+            return <Tv />;
+        default:
+            return <Devices />;
+    }
+};
+
+export default PlayTargetIcon;

src/apps/experimental/components/drawers/AppDrawer.tsx

@@ -0,0 +1,86 @@
+import React, { FC } from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from '../../routes/asyncRoutes';
+import { LEGACY_ADMIN_ROUTES, LEGACY_USER_ROUTES } from '../../routes/legacyRoutes';
+
+import AdvancedDrawerSection from './dashboard/AdvancedDrawerSection';
+import DevicesDrawerSection from './dashboard/DevicesDrawerSection';
+import LiveTvDrawerSection from './dashboard/LiveTvDrawerSection';
+import PluginDrawerSection from './dashboard/PluginDrawerSection';
+import ServerDrawerSection from './dashboard/ServerDrawerSection';
+import MainDrawerContent from './MainDrawerContent';
+import ResponsiveDrawer, { ResponsiveDrawerProps } from './ResponsiveDrawer';
+
+export const DRAWER_WIDTH = 240;
+
+const DRAWERLESS_ROUTES = [
+    'edititemmetadata.html', // metadata manager
+    'video' // video player
+];
+
+const MAIN_DRAWER_ROUTES = [
+    ...ASYNC_USER_ROUTES,
+    ...LEGACY_USER_ROUTES
+].filter(route => !DRAWERLESS_ROUTES.includes(route.path));
+
+const ADMIN_DRAWER_ROUTES = [
+    ...ASYNC_ADMIN_ROUTES,
+    ...LEGACY_ADMIN_ROUTES,
+    { path: '/configurationpage' } // Plugin configuration page
+].filter(route => !DRAWERLESS_ROUTES.includes(route.path));
+
+/** Utility function to check if a path has a drawer. */
+export const isDrawerPath = (path: string) => (
+    MAIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path)
+        || ADMIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path)
+);
+
+const AppDrawer: FC<ResponsiveDrawerProps> = ({
+    open = false,
+    onClose,
+    onOpen
+}) => (
+    <Routes>
+        {
+            MAIN_DRAWER_ROUTES.map(route => (
+                <Route
+                    key={route.path}
+                    path={route.path}
+                    element={
+                        <ResponsiveDrawer
+                            open={open}
+                            onClose={onClose}
+                            onOpen={onOpen}
+                        >
+                            <MainDrawerContent />
+                        </ResponsiveDrawer>
+                    }
+                />
+            ))
+        }
+        {
+            ADMIN_DRAWER_ROUTES.map(route => (
+                <Route
+                    key={route.path}
+                    path={route.path}
+                    element={
+                        <ResponsiveDrawer
+                            open={open}
+                            onClose={onClose}
+                            onOpen={onOpen}
+                        >
+                            <ServerDrawerSection />
+                            <DevicesDrawerSection />
+                            <LiveTvDrawerSection />
+                            <AdvancedDrawerSection />
+                            <PluginDrawerSection />
+                        </ResponsiveDrawer>
+                    }
+                />
+            ))
+        }
+    </Routes>
+);
+
+export default AppDrawer;

src/apps/experimental/components/drawers/ListItemLink.tsx

@@ -0,0 +1,45 @@
+import ListItemButton, { ListItemButtonBaseProps } from '@mui/material/ListItemButton';
+import React, { FC } from 'react';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
+
+interface ListItemLinkProps extends ListItemButtonBaseProps {
+    to: string
+}
+
+const isMatchingParams = (routeParams: URLSearchParams, currentParams: URLSearchParams) => {
+    for (const param of routeParams) {
+        if (currentParams.get(param[0]) !== param[1]) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
+const ListItemLink: FC<ListItemLinkProps> = ({
+    children,
+    to,
+    ...params
+}) => {
+    const location = useLocation();
+    const [ searchParams ] = useSearchParams();
+
+    const [ toPath, toParams ] = to.split('?');
+    // eslint-disable-next-line compat/compat
+    const toSearchParams = new URLSearchParams(`?${toParams}`);
+
+    const selected = location.pathname === toPath && (!toParams || isMatchingParams(toSearchParams, searchParams));
+
+    return (
+        <ListItemButton
+            component={Link}
+            to={to}
+            selected={selected}
+            {...params}
+        >
+            {children}
+        </ListItemButton>
+    );
+};
+
+export default ListItemLink;

src/apps/experimental/components/drawers/MainDrawerContent.tsx

@@ -0,0 +1,186 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { SystemInfo } from '@jellyfin/sdk/lib/generated-client/models/system-info';
+import { getUserViewsApi } from '@jellyfin/sdk/lib/utils/api/user-views-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Edit from '@mui/icons-material/Edit';
+import Favorite from '@mui/icons-material/Favorite';
+import Home from '@mui/icons-material/Home';
+import Link from '@mui/icons-material/Link';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useApi } from 'hooks/useApi';
+import { useWebConfig } from 'hooks/useWebConfig';
+import globalize from 'scripts/globalize';
+import { appRouter } from 'components/router/appRouter';
+
+import ListItemLink from './ListItemLink';
+import LibraryIcon from '../LibraryIcon';
+
+const MainDrawerContent = () => {
+    const { api, user } = useApi();
+    const location = useLocation();
+    const [ systemInfo, setSystemInfo ] = useState<SystemInfo>();
+    const [ userViews, setUserViews ] = useState<BaseItemDto[]>([]);
+    const webConfig = useWebConfig();
+
+    const isHomeSelected = location.pathname === '/home.html' && (!location.search || location.search === '?tab=0');
+
+    useEffect(() => {
+        if (api && user?.Id) {
+            getUserViewsApi(api)
+                .getUserViews({ userId: user.Id })
+                .then(({ data }) => {
+                    setUserViews(data.Items || []);
+                })
+                .catch(err => {
+                    console.warn('[MainDrawer] failed to fetch user views', err);
+                    setUserViews([]);
+                });
+
+            getSystemApi(api)
+                .getSystemInfo()
+                .then(({ data }) => {
+                    setSystemInfo(data);
+                })
+                .catch(err => {
+                    console.warn('[MainDrawer] failed to fetch system info', err);
+                });
+        } else {
+            setUserViews([]);
+        }
+    }, [ api, user?.Id ]);
+
+    return (
+        <>
+            {/* MAIN LINKS */}
+            <List>
+                <ListItem disablePadding>
+                    <ListItemLink to='/home.html' selected={isHomeSelected}>
+                        <ListItemIcon>
+                            <Home />
+                        </ListItemIcon>
+                        <ListItemText primary={globalize.translate('Home')} />
+                    </ListItemLink>
+                </ListItem>
+                <ListItem disablePadding>
+                    <ListItemLink to='/home.html?tab=1'>
+                        <ListItemIcon>
+                            <Favorite />
+                        </ListItemIcon>
+                        <ListItemText primary={globalize.translate('Favorites')} />
+                    </ListItemLink>
+                </ListItem>
+            </List>
+
+            {/* CUSTOM LINKS */}
+            {(!!webConfig.menuLinks && webConfig.menuLinks.length > 0) && (
+                <>
+                    <Divider />
+                    <List>
+                        {webConfig.menuLinks.map(menuLink => (
+                            <ListItem
+                                key={`${menuLink.name}_${menuLink.url}`}
+                                disablePadding
+                            >
+                                <ListItemButton
+                                    component='a'
+                                    href={menuLink.url}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    <ListItemIcon>
+                                        {/* TODO: Support custom icons */}
+                                        <Link />
+                                    </ListItemIcon>
+                                    <ListItemText primary={menuLink.name} />
+                                </ListItemButton>
+                            </ListItem>
+                        ))}
+                    </List>
+                </>
+            )}
+
+            {/* LIBRARY LINKS */}
+            {userViews.length > 0 && (
+                <>
+                    <Divider />
+                    <List
+                        aria-labelledby='libraries-subheader'
+                        subheader={
+                            <ListSubheader component='div' id='libraries-subheader'>
+                                {globalize.translate('HeaderLibraries')}
+                            </ListSubheader>
+                        }
+                    >
+                        {userViews.map(view => (
+                            <ListItem key={view.Id} disablePadding>
+                                <ListItemLink
+                                    to={appRouter.getRouteUrl(view, { context: view.CollectionType }).substring(1)}
+                                >
+                                    <ListItemIcon>
+                                        <LibraryIcon item={view} />
+                                    </ListItemIcon>
+                                    <ListItemText primary={view.Name} />
+                                </ListItemLink>
+                            </ListItem>
+                        ))}
+                    </List>
+                </>
+            )}
+
+            {/* ADMIN LINKS */}
+            {user?.Policy?.IsAdministrator && (
+                <>
+                    <Divider />
+                    <List
+                        aria-labelledby='admin-subheader'
+                        subheader={
+                            <ListSubheader component='div' id='admin-subheader'>
+                                {globalize.translate('HeaderAdmin')}
+                            </ListSubheader>
+                        }
+                    >
+                        <ListItem disablePadding>
+                            <ListItemLink to='/dashboard.html'>
+                                <ListItemIcon>
+                                    <Dashboard />
+                                </ListItemIcon>
+                                <ListItemText primary={globalize.translate('TabDashboard')} />
+                            </ListItemLink>
+                        </ListItem>
+                        <ListItem disablePadding>
+                            <ListItemLink to='/edititemmetadata.html'>
+                                <ListItemIcon>
+                                    <Edit />
+                                </ListItemIcon>
+                                <ListItemText primary={globalize.translate('MetadataManager')} />
+                            </ListItemLink>
+                        </ListItem>
+                    </List>
+                </>
+            )}
+
+            {/* FOOTER */}
+            <Divider style={{ marginTop: 'auto' }} />
+            <List>
+                <ListItem>
+                    <ListItemText
+                        primary={systemInfo?.ServerName ? systemInfo.ServerName : 'Jellyfin'}
+                        secondary={systemInfo?.Version ? `v${systemInfo.Version}` : ''}
+                    />
+                </ListItem>
+            </List>
+        </>
+    );
+};
+
+export default MainDrawerContent;

src/apps/experimental/components/drawers/ResponsiveDrawer.tsx

@@ -0,0 +1,86 @@
+import { Theme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Toolbar from '@mui/material/Toolbar';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import React, { FC, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import browser from 'scripts/browser';
+
+import { DRAWER_WIDTH } from './AppDrawer';
+import { isTabPath } from '../tabs/tabRoutes';
+
+export interface ResponsiveDrawerProps {
+    open: boolean
+    onClose: () => void
+    onOpen: () => void
+}
+
+const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
+    children,
+    open = false,
+    onClose,
+    onOpen
+}) => {
+    const location = useLocation();
+    const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
+    const isLargeScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'));
+    const isTallToolbar = isTabPath(location.pathname) && !isLargeScreen;
+
+    const getToolbarStyles = useCallback((theme: Theme) => ({
+        marginBottom: isTallToolbar ? theme.spacing(6) : 0
+    }), [ isTallToolbar ]);
+
+    return ( isSmallScreen ? (
+        /* DESKTOP DRAWER */
+        <Drawer
+            sx={{
+                width: DRAWER_WIDTH,
+                flexShrink: 0,
+                '& .MuiDrawer-paper': {
+                    width: DRAWER_WIDTH,
+                    boxSizing: 'border-box'
+                }
+            }}
+            variant='persistent'
+            anchor='left'
+            open={open}
+        >
+            <Toolbar
+                variant='dense'
+                sx={getToolbarStyles}
+            />
+            {children}
+        </Drawer>
+    ) : (
+        /* MOBILE DRAWER */
+        <SwipeableDrawer
+            anchor='left'
+            open={open}
+            onClose={onClose}
+            onOpen={onOpen}
+            // Disable swipe to open on iOS since it interferes with back navigation
+            disableDiscovery={browser.iOS}
+            ModalProps={{
+                keepMounted: true // Better open performance on mobile.
+            }}
+        >
+            <Toolbar
+                variant='dense'
+                sx={getToolbarStyles}
+            />
+            <Box
+                role='presentation'
+                // Close the drawer when the content is clicked
+                onClick={onClose}
+                onKeyDown={onClose}
+            >
+                {children}
+            </Box>
+        </SwipeableDrawer>
+    ));
+};
+
+export default ResponsiveDrawer;

src/apps/experimental/components/drawers/dashboard/AdvancedDrawerSection.tsx

@@ -0,0 +1,110 @@
+import Article from '@mui/icons-material/Article';
+import EditNotifications from '@mui/icons-material/EditNotifications';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Extension from '@mui/icons-material/Extension';
+import Lan from '@mui/icons-material/Lan';
+import Schedule from '@mui/icons-material/Schedule';
+import VpnKey from '@mui/icons-material/VpnKey';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import globalize from 'scripts/globalize';
+
+import ListItemLink from '../ListItemLink';
+
+const PLUGIN_PATHS = [
+    '/installedplugins.html',
+    '/availableplugins.html',
+    '/repositories.html',
+    '/addplugin.html',
+    '/configurationpage'
+];
+
+const AdvancedDrawerSection = () => {
+    const location = useLocation();
+
+    const isPluginSectionOpen = PLUGIN_PATHS.includes(location.pathname);
+
+    return (
+        <List
+            aria-labelledby='advanced-subheader'
+            subheader={
+                <ListSubheader component='div' id='advanced-subheader'>
+                    {globalize.translate('TabAdvanced')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/networking.html'>
+                    <ListItemIcon>
+                        <Lan />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabNetworking')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/apikeys.html'>
+                    <ListItemIcon>
+                        <VpnKey />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderApiKeys')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/log.html'>
+                    <ListItemIcon>
+                        <Article />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabLogs')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/notificationsettings.html'>
+                    <ListItemIcon>
+                        <EditNotifications />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('Notifications')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/installedplugins.html' selected={false}>
+                    <ListItemIcon>
+                        <Extension />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabPlugins')} />
+                    {isPluginSectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isPluginSectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/installedplugins.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabMyPlugins')} />
+                    </ListItemLink>
+                    <ListItemLink to='/availableplugins.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabCatalog')} />
+                    </ListItemLink>
+                    <ListItemLink to='/repositories.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabRepositories')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+            <ListItem disablePadding>
+                <ListItemLink to='/scheduledtasks.html'>
+                    <ListItemIcon>
+                        <Schedule />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabScheduledTasks')} />
+                </ListItemLink>
+            </ListItem>
+        </List>
+    );
+};
+
+export default AdvancedDrawerSection;

src/apps/experimental/components/drawers/dashboard/DevicesDrawerSection.tsx

@@ -0,0 +1,73 @@
+import { Devices, Analytics, Input, ExpandLess, ExpandMore } from '@mui/icons-material';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import globalize from 'scripts/globalize';
+
+import ListItemLink from '../ListItemLink';
+
+const DLNA_PATHS = [
+    '/dlnasettings.html',
+    '/dlnaprofiles.html'
+];
+
+const DevicesDrawerSection = () => {
+    const location = useLocation();
+
+    const isDlnaSectionOpen = DLNA_PATHS.includes(location.pathname);
+
+    return (
+        <List
+            aria-labelledby='devices-subheader'
+            subheader={
+                <ListSubheader component='div' id='devices-subheader'>
+                    {globalize.translate('HeaderDevices')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/devices.html'>
+                    <ListItemIcon>
+                        <Devices />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderDevices')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/serveractivity.html'>
+                    <ListItemIcon>
+                        <Analytics />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderActivity')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dlnasettings.html' selected={false}>
+                    <ListItemIcon>
+                        <Input />
+                    </ListItemIcon>
+                    <ListItemText primary={'DLNA'} />
+                    {isDlnaSectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isDlnaSectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/dlnasettings.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Settings')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dlnaprofiles.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabProfiles')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+        </List>
+    );
+};
+
+export default DevicesDrawerSection;

src/apps/experimental/components/drawers/dashboard/LiveTvDrawerSection.tsx

@@ -0,0 +1,43 @@
+import { Dvr, LiveTv } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+
+import ListItemLink from '../ListItemLink';
+
+const LiveTvDrawerSection = () => {
+    return (
+        <List
+            aria-labelledby='livetv-subheader'
+            subheader={
+                <ListSubheader component='div' id='livetv-subheader'>
+                    {globalize.translate('LiveTV')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/livetvstatus.html'>
+                    <ListItemIcon>
+                        <LiveTv />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('LiveTV')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/livetvsettings.html'>
+                    <ListItemIcon>
+                        <Dvr />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderDVR')} />
+                </ListItemLink>
+            </ListItem>
+        </List>
+    );
+};
+
+export default LiveTvDrawerSection;

src/apps/experimental/components/drawers/dashboard/PluginDrawerSection.tsx

@@ -0,0 +1,67 @@
+import { ConfigurationPageInfo } from '@jellyfin/sdk/lib/generated-client';
+import { getDashboardApi } from '@jellyfin/sdk/lib/utils/api/dashboard-api';
+import { Folder } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React, { useEffect, useState } from 'react';
+
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+import Dashboard from 'utils/dashboard';
+
+import ListItemLink from '../ListItemLink';
+
+const PluginDrawerSection = () => {
+    const { api } = useApi();
+    const [ pagesInfo, setPagesInfo ] = useState<ConfigurationPageInfo[]>([]);
+
+    useEffect(() => {
+        const fetchPluginPages = async () => {
+            if (!api) return;
+
+            const pagesResponse = await getDashboardApi(api)
+                .getConfigurationPages({ enableInMainMenu: true });
+
+            setPagesInfo(pagesResponse.data);
+        };
+
+        fetchPluginPages()
+            .catch(err => {
+                console.error('[PluginDrawerSection] unable to fetch plugin config pages', err);
+            });
+    }, [ api ]);
+
+    if (!api || pagesInfo.length < 1) {
+        return null;
+    }
+
+    return (
+        <List
+            aria-labelledby='plugins-subheader'
+            subheader={
+                <ListSubheader component='div' id='plugins-subheader'>
+                    {globalize.translate('TabPlugins')}
+                </ListSubheader>
+            }
+        >
+            {
+                pagesInfo.map(pageInfo => (
+                    <ListItem key={pageInfo.PluginId} disablePadding>
+                        <ListItemLink to={`/${Dashboard.getPluginUrl(pageInfo.Name)}`}>
+                            <ListItemIcon>
+                                {/* TODO: Support different icons? */}
+                                <Folder />
+                            </ListItemIcon>
+                            <ListItemText primary={pageInfo.DisplayName} />
+                        </ListItemLink>
+                    </ListItem>
+                ))
+            }
+        </List>
+    );
+};
+
+export default PluginDrawerSection;

src/apps/experimental/components/drawers/dashboard/ServerDrawerSection.tsx

@@ -0,0 +1,118 @@
+import { Dashboard, ExpandLess, ExpandMore, LibraryAdd, People, PlayCircle, Settings } from '@mui/icons-material';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import globalize from 'scripts/globalize';
+
+import ListItemLink from '../ListItemLink';
+
+const LIBRARY_PATHS = [
+    '/library.html',
+    '/librarydisplay.html',
+    '/metadataimages.html',
+    '/metadatanfo.html'
+];
+
+const PLAYBACK_PATHS = [
+    '/encodingsettings.html',
+    '/playbackconfiguration.html',
+    '/streamingsettings.html'
+];
+
+const ServerDrawerSection = () => {
+    const location = useLocation();
+
+    const isLibrarySectionOpen = LIBRARY_PATHS.includes(location.pathname);
+    const isPlaybackSectionOpen = PLAYBACK_PATHS.includes(location.pathname);
+
+    return (
+        <List
+            aria-labelledby='server-subheader'
+            subheader={
+                <ListSubheader component='div' id='server-subheader'>
+                    {globalize.translate('TabServer')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard.html'>
+                    <ListItemIcon>
+                        <Dashboard />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabDashboard')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboardgeneral.html'>
+                    <ListItemIcon>
+                        <Settings />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('General')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/userprofiles.html'>
+                    <ListItemIcon>
+                        <People />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderUsers')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/library.html' selected={false}>
+                    <ListItemIcon>
+                        <LibraryAdd />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderLibraries')} />
+                    {isLibrarySectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/library.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('HeaderLibraries')} />
+                    </ListItemLink>
+                    <ListItemLink to='/librarydisplay.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Display')} />
+                    </ListItemLink>
+                    <ListItemLink to='/metadataimages.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Metadata')} />
+                    </ListItemLink>
+                    <ListItemLink to='/metadatanfo.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabNfoSettings')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+            <ListItem disablePadding>
+                <ListItemLink to='/encodingsettings.html' selected={false}>
+                    <ListItemIcon>
+                        <PlayCircle />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TitlePlayback')} />
+                    {isPlaybackSectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/encodingsettings.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Transcoding')} />
+                    </ListItemLink>
+                    <ListItemLink to='/playbackconfiguration.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('ButtonResume')} />
+                    </ListItemLink>
+                    <ListItemLink to='/streamingsettings.html' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabStreaming')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+        </List>
+    );
+};
+
+export default ServerDrawerSection;

src/apps/experimental/components/tabs/AppTabs.tsx

@@ -0,0 +1,90 @@
+import { Theme } from '@mui/material/styles';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { debounce } from 'lodash-es';
+import React, { FC, useCallback, useEffect } from 'react';
+import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
+
+import TabRoutes, { getDefaultTabIndex } from './tabRoutes';
+
+interface AppTabsParams {
+    isDrawerOpen: boolean
+}
+
+const handleResize = debounce(() => window.dispatchEvent(new Event('resize')), 100);
+
+const AppTabs: FC<AppTabsParams> = ({
+    isDrawerOpen
+}) => {
+    const isBigScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
+    const location = useLocation();
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    const searchParamsTab = searchParams.get('tab');
+    const libraryId = location.pathname === '/livetv.html' ?
+        'livetv' : searchParams.get('topParentId');
+    const activeTab = searchParamsTab !== null ?
+        parseInt(searchParamsTab, 10) :
+        getDefaultTabIndex(location.pathname, libraryId);
+
+    // HACK: Force resizing to workaround upstream bug with tab resizing
+    // https://github.com/mui/material-ui/issues/24011
+    useEffect(() => {
+        handleResize();
+    }, [ isDrawerOpen ]);
+
+    const onTabClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+
+        const tabIndex = event.currentTarget.dataset.tabIndex;
+
+        if (tabIndex) {
+            searchParams.set('tab', tabIndex);
+            setSearchParams(searchParams);
+        }
+    }, [ searchParams, setSearchParams ]);
+
+    return (
+        <Routes>
+            {
+                TabRoutes.map(route => (
+                    <Route
+                        key={route.path}
+                        path={route.path}
+                        element={
+                            <Tabs
+                                value={activeTab}
+                                sx={{
+                                    width: '100%',
+                                    flexShrink: {
+                                        xs: 0,
+                                        lg: 'unset'
+                                    },
+                                    order: {
+                                        xs: 100,
+                                        lg: 'unset'
+                                    }
+                                }}
+                                variant={isBigScreen ? 'standard' : 'scrollable'}
+                                centered={isBigScreen}
+                            >
+                                {
+                                    route.tabs.map(({ index, label }) => (
+                                        <Tab
+                                            key={`${route}-tab-${index}`}
+                                            label={label}
+                                            data-tab-index={`${index}`}
+                                            onClick={onTabClick}
+                                        />
+                                    ))
+                                }
+                            </Tabs>
+                        }
+                    />
+                ))
+            }
+        </Routes>
+    );
+};
+
+export default AppTabs;

src/apps/experimental/components/tabs/tabRoutes.ts

@@ -0,0 +1,190 @@
+import globalize from 'scripts/globalize';
+import * as userSettings from 'scripts/settings/userSettings';
+import { LibraryTab } from 'types/libraryTab';
+
+interface TabDefinition {
+    index: number
+    label: string
+    value: LibraryTab
+    isDefault?: boolean
+}
+
+interface TabRoute {
+    path: string,
+    tabs: TabDefinition[]
+}
+
+/**
+ * Utility function to check if a path has tabs.
+ */
+export const isTabPath = (path: string) => (
+    TabRoutes.some(route => route.path === path)
+);
+
+/**
+ * Utility function to get the default tab index for a specified URL path and library.
+ */
+export const getDefaultTabIndex = (path: string, libraryId?: string | null) => {
+    if (!libraryId) return 0;
+
+    const tabs = TabRoutes.find(route => route.path === path)?.tabs ?? [];
+    const defaultTab = userSettings.get('landing-' + libraryId, false);
+
+    return tabs.find(tab => tab.value === defaultTab)?.index
+        ?? tabs.find(tab => tab.isDefault)?.index
+        ?? 0;
+};
+
+const TabRoutes: TabRoute[] = [
+    {
+        path: '/livetv.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Programs'),
+                value: LibraryTab.Programs,
+                isDefault: true
+            },
+            {
+                index: 1,
+                label: globalize.translate('Guide'),
+                value: LibraryTab.Guide
+            },
+            {
+                index: 2,
+                label: globalize.translate('Channels'),
+                value: LibraryTab.Channels
+            },
+            {
+                index: 3,
+                label: globalize.translate('Recordings'),
+                value: LibraryTab.Recordings
+            },
+            {
+                index: 4,
+                label: globalize.translate('Schedule'),
+                value: LibraryTab.Schedule
+            },
+            {
+                index: 5,
+                label: globalize.translate('Series'),
+                value: LibraryTab.Series
+            }
+        ]
+    },
+    {
+        path: '/movies.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Movies'),
+                value: LibraryTab.Movies,
+                isDefault: true
+            },
+            {
+                index: 1,
+                label: globalize.translate('Suggestions'),
+                value: LibraryTab.Suggestions
+            },
+            {
+                index: 2,
+                label: globalize.translate('Trailers'),
+                value: LibraryTab.Trailers
+            },
+            {
+                index: 3,
+                label: globalize.translate('Favorites'),
+                value: LibraryTab.Favorites
+            },
+            {
+                index: 4,
+                label: globalize.translate('Collections'),
+                value: LibraryTab.Collections
+            },
+            {
+                index: 5,
+                label: globalize.translate('Genres'),
+                value: LibraryTab.Genres
+            }
+        ]
+    },
+    {
+        path: '/music.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Albums'),
+                value: LibraryTab.Albums,
+                isDefault: true
+            },
+            {
+                index: 1,
+                label: globalize.translate('Suggestions'),
+                value: LibraryTab.Suggestions
+            },
+            {
+                index: 2,
+                label: globalize.translate('HeaderAlbumArtists'),
+                value: LibraryTab.AlbumArtists
+            },
+            {
+                index: 3,
+                label: globalize.translate('Artists'),
+                value: LibraryTab.Artists
+            },
+            {
+                index: 4,
+                label: globalize.translate('Playlists'),
+                value: LibraryTab.Playlists
+            },
+            {
+                index: 5,
+                label: globalize.translate('Songs'),
+                value: LibraryTab.Songs
+            },
+            {
+                index: 6,
+                label: globalize.translate('Genres'),
+                value: LibraryTab.Genres
+            }
+        ]
+    },
+    {
+        path: '/tv.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Shows'),
+                value: LibraryTab.Shows,
+                isDefault: true
+            },
+            {
+                index: 1,
+                label: globalize.translate('Suggestions'),
+                value: LibraryTab.Suggestions
+            },
+            {
+                index: 2,
+                label: globalize.translate('TabUpcoming'),
+                value: LibraryTab.Upcoming
+            },
+            {
+                index: 3,
+                label: globalize.translate('Genres'),
+                value: LibraryTab.Genres
+            },
+            {
+                index: 4,
+                label: globalize.translate('TabNetworks'),
+                value: LibraryTab.Networks
+            },
+            {
+                index: 5,
+                label: globalize.translate('Episodes'),
+                value: LibraryTab.Episodes
+            }
+        ]
+    }
+];
+
+export default TabRoutes;

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

@@ -0,0 +1,11 @@
+import { AsyncRoute } from '../../../../components/router/AsyncRoute';
+
+export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'notificationsettings.html', page: 'dashboard/notifications' },
+    { path: 'usernew.html', page: 'user/usernew' },
+    { path: 'userprofiles.html', page: 'user/userprofiles' },
+    { path: 'useredit.html', page: 'user/useredit' },
+    { path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
+    { path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
+    { path: 'userpassword.html', page: 'user/userpassword' }
+];

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

@@ -0,0 +1,2 @@
+export * from './admin';
+export * from './user';

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

@@ -0,0 +1,8 @@
+import { AsyncRoute, AsyncRouteType } from '../../../../components/router/AsyncRoute';
+
+export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    { path: 'search.html', page: 'search' },
+    { path: 'userprofile.html', page: 'user/userprofile' },
+    { path: 'home.html', page: 'home', type: AsyncRouteType.Experimental },
+    { path: 'movies.html', page: 'movies', type: AsyncRouteType.Experimental }
+];

src/apps/experimental/routes/home.tsx

@@ -1,22 +1,20 @@
 import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
-import globalize from '../scripts/globalize';
+import { useSearchParams } from 'react-router-dom';
-import LibraryMenu from '../scripts/libraryMenu';
-import { clearBackdrop } from '../components/backdrop/backdrop';
-import layoutManager from '../components/layoutManager';
-import * as mainTabsManager from '../components/maintabsmanager';
-import '../elements/emby-tabs/emby-tabs';
-import '../elements/emby-button/emby-button';
-import '../elements/emby-scroller/emby-scroller';
-import Page from '../components/Page';
 
-type IProps = {
+import globalize from '../../../scripts/globalize';
-    tab?: string;
+import LibraryMenu from '../../../scripts/libraryMenu';
-}
+import { clearBackdrop } from '../../../components/backdrop/backdrop';
+import layoutManager from '../../../components/layoutManager';
+import * as mainTabsManager from '../../../components/maintabsmanager';
+import '../../../elements/emby-tabs/emby-tabs';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-scroller/emby-scroller';
+import Page from '../../../components/Page';
 
 type OnResumeOptions = {
     autoFocus?: boolean;
     refresh?: boolean
-}
+};
 
 type ControllerProps = {
     onResume: (
@@ -25,17 +23,14 @@ type ControllerProps = {
     refreshed: boolean;
     onPause: () => void;
     destroy: () => void;
-}
-
-const Home: FunctionComponent<IProps> = (props: IProps) => {
-    const getDefaultTabIndex = () => {
-        return 0;
 };
 
+const Home: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const initialTabIndex = parseInt(searchParams.get('tab') || '0', 10);
+
     const tabController = useRef<ControllerProps | null>();
-    const currentTabIndex = useRef(parseInt(props.tab || getDefaultTabIndex().toString()));
     const tabControllers = useMemo<ControllerProps[]>(() => [], []);
-    const initialTabIndex = useRef<number | null>(currentTabIndex.current);
     const element = useRef<HTMLDivElement>(null);
 
     const setTitle = () => {
@@ -70,18 +65,18 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
                 depends = 'favorites';
         }
 
-        return import(/* webpackChunkName: "[request]" */ `../controllers/${depends}`).then(({ default: controllerFactory }) => {
+        return import(/* webpackChunkName: "[request]" */ `../../../controllers/${depends}`).then(({ default: controllerFactory }) => {
             let controller = tabControllers[index];
 
             if (!controller) {
                 const tabContent = element.current?.querySelector(".tabContent[data-index='" + index + "']");
-                controller = new controllerFactory(tabContent, props);
+                controller = new controllerFactory(tabContent, null);
                 tabControllers[index] = controller;
             }
 
             return controller;
         });
-    }, [props, tabControllers]);
+    }, [ tabControllers ]);
 
     const onViewDestroy = useCallback(() => {
         if (tabControllers) {
@@ -93,7 +88,6 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
         }
 
         tabController.current = null;
-        initialTabIndex.current = null;
     }, [ tabControllers ]);
 
     const loadTab = useCallback((index: number, previousIndex: number | null) => {
@@ -106,17 +100,18 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
             });
 
             controller.refreshed = true;
-            currentTabIndex.current = index;
             tabController.current = controller;
+        }).catch(err => {
+            console.error('[Home] failed to get tab controller', err);
         });
     }, [ getTabController ]);
 
     const onTabChange = useCallback((e: { detail: { selectedTabIndex: string; previousIndex: number | null }; }) => {
-        const newIndex = parseInt(e.detail.selectedTabIndex);
+        const newIndex = parseInt(e.detail.selectedTabIndex, 10);
         const previousIndex = e.detail.previousIndex;
 
         const previousTabController = previousIndex == null ? null : tabControllers[previousIndex];
-        if (previousTabController && previousTabController.onPause) {
+        if (previousTabController?.onPause) {
             previousTabController.onPause();
         }
 
@@ -130,30 +125,29 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
         const currentTabController = tabController.current;
 
         if (!currentTabController) {
-            mainTabsManager.selectedTabIndex(initialTabIndex.current);
+            mainTabsManager.selectedTabIndex(initialTabIndex);
-        } else if (currentTabController && currentTabController.onResume) {
+        } else if (currentTabController?.onResume) {
             currentTabController.onResume({});
         }
         (document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader');
-    }, []);
+    }, [ initialTabIndex ]);
 
     const onPause = useCallback(() => {
         const currentTabController = tabController.current;
-        if (currentTabController && currentTabController.onPause) {
+        if (currentTabController?.onPause) {
             currentTabController.onPause();
         }
         (document.querySelector('.skinHeader') as HTMLDivElement).classList.remove('noHomeButtonHeader');
     }, []);
 
     useEffect(() => {
-        mainTabsManager.setTabs(element.current, currentTabIndex.current, getTabs, getTabContainers, null, onTabChange, false);
+        mainTabsManager.setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false);
 
         onResume();
         return () => {
             onPause();
-            onViewDestroy();
         };
-    }, [onPause, onResume, onTabChange, onViewDestroy]);
+    }, [ initialTabIndex, onPause, onResume, onTabChange, onViewDestroy ]);
 
     return (
         <div ref={element}>

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

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '.';
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
     {
@@ -103,18 +103,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'dashboard/metadatanfo',
             view: 'dashboard/metadatanfo.html'
         }
-    }, {
-        path: 'notificationsetting.html',
-        pageProps: {
-            controller: 'dashboard/notifications/notification/index',
-            view: 'dashboard/notifications/notification/index.html'
-        }
-    }, {
-        path: 'notificationsettings.html',
-        pageProps: {
-            controller: 'dashboard/notifications/notifications/index',
-            view: 'dashboard/notifications/notifications/index.html'
-        }
     }, {
         path: 'playbackconfiguration.html',
         pageProps: {

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

@@ -0,0 +1,3 @@
+export * from './admin';
+export * from './public';
+export * from './user';

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

@@ -0,0 +1,81 @@
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
+
+export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
+    {
+        path: 'addserver.html',
+        pageProps: {
+            controller: 'session/addServer/index',
+            view: 'session/addServer/index.html'
+        }
+    },
+    {
+        path: 'selectserver.html',
+        pageProps: {
+            controller: 'session/selectServer/index',
+            view: 'session/selectServer/index.html'
+        }
+    },
+    {
+        path: 'login.html',
+        pageProps: {
+            controller: 'session/login/index',
+            view: 'session/login/index.html'
+        }
+    },
+    {
+        path: 'forgotpassword.html',
+        pageProps: {
+            controller: 'session/forgotPassword/index',
+            view: 'session/forgotPassword/index.html'
+        }
+    },
+    {
+        path: 'forgotpasswordpin.html',
+        pageProps: {
+            controller: 'session/resetPassword/index',
+            view: 'session/resetPassword/index.html'
+        }
+    },
+    {
+        path: 'wizardremoteaccess.html',
+        pageProps: {
+            controller: 'wizard/remote/index',
+            view: 'wizard/remote/index.html'
+        }
+    },
+    {
+        path: 'wizardfinish.html',
+        pageProps: {
+            controller: 'wizard/finish/index',
+            view: 'wizard/finish/index.html'
+        }
+    },
+    {
+        path: 'wizardlibrary.html',
+        pageProps: {
+            controller: 'dashboard/library',
+            view: 'wizard/library.html'
+        }
+    },
+    {
+        path: 'wizardsettings.html',
+        pageProps: {
+            controller: 'wizard/settings/index',
+            view: 'wizard/settings/index.html'
+        }
+    },
+    {
+        path: 'wizardstart.html',
+        pageProps: {
+            controller: 'wizard/start/index',
+            view: 'wizard/start/index.html'
+        }
+    },
+    {
+        path: 'wizarduser.html',
+        pageProps: {
+            controller: 'wizard/user/index',
+            view: 'wizard/user/index.html'
+        }
+    }
+];

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

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

src/apps/experimental/routes/movies/CollectionsView.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../components/common/ViewItemsContainer';
+import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {

src/apps/experimental/routes/movies/FavoritesView.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../components/common/ViewItemsContainer';
+import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {

src/apps/experimental/routes/movies/GenresView.tsx

@@ -1,9 +1,9 @@
 import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 
-import loading from '../../components/loading/loading';
+import loading from '../../../../components/loading/loading';
-import GenresItemsContainer from '../../components/common/GenresItemsContainer';
+import GenresItemsContainer from '../../../../components/common/GenresItemsContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const GenresView: FC<LibraryViewProps> = ({ topParentId }) => {
     const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
@@ -23,6 +23,8 @@ const GenresView: FC<LibraryViewProps> = ({ topParentId }) => {
         ).then((result) => {
             setItemsResult(result);
             loading.hide();
+        }).catch(err => {
+            console.error('[GenresView] failed to fetch genres', err);
         });
     }, [topParentId]);
 

src/apps/experimental/routes/movies/MoviesView.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../components/common/ViewItemsContainer';
+import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {

src/apps/experimental/routes/movies/SuggestionsView.tsx

@@ -1,13 +1,13 @@
 import type { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 
-import layoutManager from '../../components/layoutManager';
+import layoutManager from '../../../../components/layoutManager';
-import loading from '../../components/loading/loading';
+import loading from '../../../../components/loading/loading';
-import dom from '../../scripts/dom';
+import dom from '../../../../scripts/dom';
-import globalize from '../../scripts/globalize';
+import globalize from '../../../../scripts/globalize';
-import RecommendationContainer from '../../components/common/RecommendationContainer';
+import RecommendationContainer from '../../../../components/common/RecommendationContainer';
-import SectionContainer from '../../components/common/SectionContainer';
+import SectionContainer from '../../../../components/common/SectionContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const SuggestionsView: FC<LibraryViewProps> = ({ topParentId }) => {
     const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
@@ -28,8 +28,10 @@ const SuggestionsView: FC<LibraryViewProps> = ({topParentId}) => {
     }, [enableScrollX]);
 
     const autoFocus = useCallback((page) => {
-        import('../../components/autoFocuser').then(({default: autoFocuser}) => {
+        import('../../../../components/autoFocuser').then(({ default: autoFocuser }) => {
             autoFocuser.autoFocus(page);
+        }).catch(err => {
+            console.error('[SuggestionsView] failed to load data', err);
         });
     }, []);
 
@@ -55,6 +57,8 @@ const SuggestionsView: FC<LibraryViewProps> = ({topParentId}) => {
 
             loading.hide();
             autoFocus(page);
+        }).catch(err => {
+            console.error('[SuggestionsView] failed to fetch items', err);
         });
     }, [autoFocus]);
 
@@ -72,6 +76,8 @@ const SuggestionsView: FC<LibraryViewProps> = ({topParentId}) => {
             setLatestItems(items);
 
             autoFocus(page);
+        }).catch(err => {
+            console.error('[SuggestionsView] failed to fetch latest items', err);
         });
     }, [autoFocus]);
 
@@ -95,6 +101,8 @@ const SuggestionsView: FC<LibraryViewProps> = ({topParentId}) => {
             setRecommendations(result);
 
             autoFocus(page);
+        }).catch(err => {
+            console.error('[SuggestionsView] failed to fetch recommendations', err);
         });
     }, [autoFocus]);
 
@@ -143,8 +151,8 @@ const SuggestionsView: FC<LibraryViewProps> = ({topParentId}) => {
             {!recommendations.length ? <div className='noItemsMessage centerMessage'>
                 <h1>{globalize.translate('MessageNothingHere')}</h1>
                 <p>{globalize.translate('MessageNoMovieSuggestionsAvailable')}</p>
-            </div> : recommendations.map((recommendation, index) => {
+            </div> : recommendations.map(recommendation => {
-                return <RecommendationContainer key={index} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
+                return <RecommendationContainer key={recommendation.CategoryId} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
             })}
         </div>
     );

src/apps/experimental/routes/movies/TrailersView.tsx

@@ -1,8 +1,8 @@
 
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../components/common/ViewItemsContainer';
+import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../types/interface';
+import { LibraryViewProps } from '../../../../types/interface';
 
 const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {

src/apps/experimental/routes/movies/index.tsx

@@ -1,62 +1,28 @@
-import '../../elements/emby-scroller/emby-scroller';
+import '../../../../elements/emby-scroller/emby-scroller';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../../../elements/emby-itemscontainer/emby-itemscontainer';
-import '../../elements/emby-tabs/emby-tabs';
+import '../../../../elements/emby-tabs/emby-tabs';
-import '../../elements/emby-button/emby-button';
+import '../../../../elements/emby-button/emby-button';
 
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 
-import * as mainTabsManager from '../../components/maintabsmanager';
+import Page from '../../../../components/Page';
-import Page from '../../components/Page';
+import globalize from '../../../../scripts/globalize';
-import globalize from '../../scripts/globalize';
+import libraryMenu from '../../../../scripts/libraryMenu';
-import libraryMenu from '../../scripts/libraryMenu';
-import * as userSettings from '../../scripts/settings/userSettings';
 import CollectionsView from './CollectionsView';
 import FavoritesView from './FavoritesView';
 import GenresView from './GenresView';
 import MoviesView from './MoviesView';
 import SuggestionsView from './SuggestionsView';
 import TrailersView from './TrailersView';
-
+import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
-const getDefaultTabIndex = (folderId: string | null) => {
-    switch (userSettings.get('landing-' + folderId, false)) {
-        case 'suggestions':
-            return 1;
-
-        case 'favorites':
-            return 3;
-
-        case 'collections':
-            return 4;
-
-        case 'genres':
-            return 5;
-
-        default:
-            return 0;
-    }
-};
-
-const getTabs = () => {
-    return [{
-        name: globalize.translate('Movies')
-    }, {
-        name: globalize.translate('Suggestions')
-    }, {
-        name: globalize.translate('Trailers')
-    }, {
-        name: globalize.translate('Favorites')
-    }, {
-        name: globalize.translate('Collections')
-    }, {
-        name: globalize.translate('Genres')
-    }];
-};
 
 const Movies: FC = () => {
+    const location = useLocation();
     const [ searchParams ] = useSearchParams();
-    const currentTabIndex = parseInt(searchParams.get('tab') || getDefaultTabIndex(searchParams.get('topParentId')).toString());
+    const searchParamsTab = searchParams.get('tab');
-    const [ selectedIndex, setSelectedIndex ] = useState(currentTabIndex);
+    const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) :
+        getDefaultTabIndex(location.pathname, searchParams.get('topParentId'));
     const element = useRef<HTMLDivElement>(null);
 
     const getTabComponent = (index: number) => {
@@ -94,11 +60,6 @@ const Movies: FC = () => {
         return component;
     };
 
-    const onTabChange = useCallback((e: { detail: { selectedTabIndex: string; }; }) => {
-        const newIndex = parseInt(e.detail.selectedTabIndex);
-        setSelectedIndex(newIndex);
-    }, []);
-
     useEffect(() => {
         const page = element.current;
 
@@ -106,7 +67,7 @@ const Movies: FC = () => {
             console.error('Unexpected null reference');
             return;
         }
-        mainTabsManager.setTabs(page, selectedIndex, getTabs, undefined, undefined, onTabChange);
+
         if (!page.getAttribute('data-title')) {
             const parentId = searchParams.get('topParentId');
 
@@ -114,13 +75,17 @@ const Movies: FC = () => {
                 window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), parentId).then((item) => {
                     page.setAttribute('data-title', item.Name as string);
                     libraryMenu.setTitle(item.Name);
+                }).catch(err => {
+                    console.error('[movies] failed to fetch library', err);
+                    page.setAttribute('data-title', globalize.translate('Movies'));
+                    libraryMenu.setTitle(globalize.translate('Movies'));
                 });
             } else {
                 page.setAttribute('data-title', globalize.translate('Movies'));
                 libraryMenu.setTitle(globalize.translate('Movies'));
             }
         }
-    }, [onTabChange, searchParams, selectedIndex]);
+    }, [ searchParams ]);
 
     return (
         <div ref={element}>
@@ -129,7 +94,7 @@ const Movies: FC = () => {
                 className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
                 backDropType='movie'
             >
-                {getTabComponent(selectedIndex)}
+                {getTabComponent(currentTabIndex)}
 
             </Page>
         </div>

src/apps/experimental/theme.ts

@@ -0,0 +1,53 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#00a4dc'
+        },
+        secondary: {
+            main: '#aa5cc3'
+        },
+        background: {
+            default: '#101010',
+            paper: '#202020'
+        },
+        action: {
+            selectedOpacity: 0.2
+        }
+    },
+    typography: {
+        fontFamily: '"Noto Sans", sans-serif',
+        button: {
+            textTransform: 'none'
+        }
+    },
+    components: {
+        MuiButton: {
+            defaultProps: {
+                variant: 'contained'
+            }
+        },
+        MuiFormControl: {
+            defaultProps: {
+                variant: 'filled'
+            }
+        },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'filled'
+            }
+        },
+        MuiListSubheader: {
+            styleOverrides: {
+                root: {
+                    // NOTE: Added for drawer subheaders, but maybe it won't work in other cases?
+                    backgroundColor: 'inherit'
+                }
+            }
+        }
+    }
+});
+
+export default theme;

src/apps/stable/App.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
+
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import ServerContentPage from 'components/ServerContentPage';
+import ConnectionRequired from 'components/ConnectionRequired';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
+
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
+import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+
+const Layout = () => (
+    <>
+        <Backdrop />
+        <AppHeader />
+
+        <div className='mainAnimatedPages skinBody' />
+        <div className='skinBody'>
+            <Outlet />
+        </div>
+    </>
+);
+
+const StableApp = () => (
+    <Routes>
+        <Route element={<Layout />}>
+            {/* User routes */}
+            <Route path='/' element={<ConnectionRequired />}>
+                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
+                {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
+            </Route>
+
+            {/* Admin routes */}
+            <Route path='/' element={<ConnectionRequired isAdminRequired />}>
+                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
+
+                <Route path='configurationpage' element={
+                    <ServerContentPage view='/web/configurationpage' />
+                } />
+            </Route>
+
+            {/* Public routes */}
+            <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
+                <Route index element={<Navigate replace to='/home.html' />} />
+
+                {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
+            </Route>
+
+            {/* Suppress warnings for unhandled routes */}
+            <Route path='*' element={null} />
+        </Route>
+    </Routes>
+);
+
+export default StableApp;

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

@@ -0,0 +1,11 @@
+import { AsyncRoute } from '../../../../components/router/AsyncRoute';
+
+export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'notificationsettings.html', page: 'dashboard/notifications' },
+    { path: 'usernew.html', page: 'user/usernew' },
+    { path: 'userprofiles.html', page: 'user/userprofiles' },
+    { path: 'useredit.html', page: 'user/useredit' },
+    { path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
+    { path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
+    { path: 'userpassword.html', page: 'user/userpassword' }
+];

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

@@ -0,0 +1,2 @@
+export * from './admin';
+export * from './user';

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

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

src/apps/stable/routes/dashboard/notifications.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import Page from 'components/Page';
+import globalize from 'scripts/globalize';
+
+const PluginLink = () => (
+    <div
+        dangerouslySetInnerHTML={{
+            __html: `<a
+                is='emby-linkbutton'
+                class='button-link'
+                href='#/addplugin.html?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
+            >
+                ${globalize.translate('GetThePlugin')}
+            </a>`
+        }}
+    />
+);
+
+const Notifications = () => (
+    <Page
+        id='notificationSettingPage'
+        title={globalize.translate('Notifications')}
+        className='mainAnimatedPage type-interior'
+    >
+        <div className='content-primary'>
+            <h2>{globalize.translate('Notifications')}</h2>
+            <p>
+                {globalize.translate('NotificationsMovedMessage')}
+            </p>
+            <PluginLink />
+        </div>
+    </Page>
+);
+
+export default Notifications;

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

@@ -0,0 +1,185 @@
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
+
+export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
+    {
+        path: 'dashboard.html',
+        pageProps: {
+            controller: 'dashboard/dashboard',
+            view: 'dashboard/dashboard.html'
+        }
+    }, {
+        path: 'dashboardgeneral.html',
+        pageProps: {
+            controller: 'dashboard/general',
+            view: 'dashboard/general.html'
+        }
+    }, {
+        path: 'networking.html',
+        pageProps: {
+            controller: 'dashboard/networking',
+            view: 'dashboard/networking.html'
+        }
+    }, {
+        path: 'devices.html',
+        pageProps: {
+            controller: 'dashboard/devices/devices',
+            view: 'dashboard/devices/devices.html'
+        }
+    }, {
+        path: 'device.html',
+        pageProps: {
+            controller: 'dashboard/devices/device',
+            view: 'dashboard/devices/device.html'
+        }
+    }, {
+        path: 'quickConnect.html',
+        pageProps: {
+            controller: 'dashboard/quickConnect',
+            view: 'dashboard/quickConnect.html'
+        }
+    }, {
+        path: 'dlnaprofile.html',
+        pageProps: {
+            controller: 'dashboard/dlna/profile',
+            view: 'dashboard/dlna/profile.html'
+        }
+    }, {
+        path: 'dlnaprofiles.html',
+        pageProps: {
+            controller: 'dashboard/dlna/profiles',
+            view: 'dashboard/dlna/profiles.html'
+        }
+    }, {
+        path: 'dlnasettings.html',
+        pageProps: {
+            controller: 'dashboard/dlna/settings',
+            view: 'dashboard/dlna/settings.html'
+        }
+    }, {
+        path: 'addplugin.html',
+        pageProps: {
+            controller: 'dashboard/plugins/add/index',
+            view: 'dashboard/plugins/add/index.html'
+        }
+    }, {
+        path: 'library.html',
+        pageProps: {
+            controller: 'dashboard/library',
+            view: 'dashboard/library.html'
+        }
+    }, {
+        path: 'librarydisplay.html',
+        pageProps: {
+            controller: 'dashboard/librarydisplay',
+            view: 'dashboard/librarydisplay.html'
+        }
+    }, {
+        path: 'edititemmetadata.html',
+        pageProps: {
+            controller: 'edititemmetadata',
+            view: 'edititemmetadata.html'
+        }
+    }, {
+        path: 'encodingsettings.html',
+        pageProps: {
+            controller: 'dashboard/encodingsettings',
+            view: 'dashboard/encodingsettings.html'
+        }
+    }, {
+        path: 'log.html',
+        pageProps: {
+            controller: 'dashboard/logs',
+            view: 'dashboard/logs.html'
+        }
+    }, {
+        path: 'metadataimages.html',
+        pageProps: {
+            controller: 'dashboard/metadataImages',
+            view: 'dashboard/metadataimages.html'
+        }
+    }, {
+        path: 'metadatanfo.html',
+        pageProps: {
+            controller: 'dashboard/metadatanfo',
+            view: 'dashboard/metadatanfo.html'
+        }
+    }, {
+        path: 'playbackconfiguration.html',
+        pageProps: {
+            controller: 'dashboard/playback',
+            view: 'dashboard/playback.html'
+        }
+    }, {
+        path: 'availableplugins.html',
+        pageProps: {
+            controller: 'dashboard/plugins/available/index',
+            view: 'dashboard/plugins/available/index.html'
+        }
+    }, {
+        path: 'repositories.html',
+        pageProps: {
+            controller: 'dashboard/plugins/repositories/index',
+            view: 'dashboard/plugins/repositories/index.html'
+        }
+    }, {
+        path: 'livetvguideprovider.html',
+        pageProps: {
+            controller: 'livetvguideprovider',
+            view: 'livetvguideprovider.html'
+        }
+    }, {
+        path: 'livetvsettings.html',
+        pageProps: {
+            controller: 'livetvsettings',
+            view: 'livetvsettings.html'
+        }
+    }, {
+        path: 'livetvstatus.html',
+        pageProps: {
+            controller: 'livetvstatus',
+            view: 'livetvstatus.html'
+        }
+    }, {
+        path: 'livetvtuner.html',
+        pageProps: {
+            controller: 'livetvtuner',
+            view: 'livetvtuner.html'
+        }
+    }, {
+        path: 'installedplugins.html',
+        pageProps: {
+            controller: 'dashboard/plugins/installed/index',
+            view: 'dashboard/plugins/installed/index.html'
+        }
+    }, {
+        path: 'scheduledtask.html',
+        pageProps: {
+            controller: 'dashboard/scheduledtasks/scheduledtask',
+            view: 'dashboard/scheduledtasks/scheduledtask.html'
+        }
+    }, {
+        path: 'scheduledtasks.html',
+        pageProps: {
+            controller: 'dashboard/scheduledtasks/scheduledtasks',
+            view: 'dashboard/scheduledtasks/scheduledtasks.html'
+        }
+    }, {
+        path: 'serveractivity.html',
+        pageProps: {
+            controller: 'dashboard/serveractivity',
+            view: 'dashboard/serveractivity.html'
+        }
+    }, {
+        path: 'apikeys.html',
+        pageProps: {
+            controller: 'dashboard/apikeys',
+            view: 'dashboard/apikeys.html'
+        }
+    }, {
+        path: 'streamingsettings.html',
+        pageProps: {
+            view: 'dashboard/streaming.html',
+            controller: 'dashboard/streaming'
+        }
+    }
+];

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

@@ -0,0 +1,3 @@
+export * from './admin';
+export * from './public';
+export * from './user';

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

@@ -0,0 +1,81 @@
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
+
+export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
+    {
+        path: 'addserver.html',
+        pageProps: {
+            controller: 'session/addServer/index',
+            view: 'session/addServer/index.html'
+        }
+    },
+    {
+        path: 'selectserver.html',
+        pageProps: {
+            controller: 'session/selectServer/index',
+            view: 'session/selectServer/index.html'
+        }
+    },
+    {
+        path: 'login.html',
+        pageProps: {
+            controller: 'session/login/index',
+            view: 'session/login/index.html'
+        }
+    },
+    {
+        path: 'forgotpassword.html',
+        pageProps: {
+            controller: 'session/forgotPassword/index',
+            view: 'session/forgotPassword/index.html'
+        }
+    },
+    {
+        path: 'forgotpasswordpin.html',
+        pageProps: {
+            controller: 'session/resetPassword/index',
+            view: 'session/resetPassword/index.html'
+        }
+    },
+    {
+        path: 'wizardremoteaccess.html',
+        pageProps: {
+            controller: 'wizard/remote/index',
+            view: 'wizard/remote/index.html'
+        }
+    },
+    {
+        path: 'wizardfinish.html',
+        pageProps: {
+            controller: 'wizard/finish/index',
+            view: 'wizard/finish/index.html'
+        }
+    },
+    {
+        path: 'wizardlibrary.html',
+        pageProps: {
+            controller: 'dashboard/library',
+            view: 'wizard/library.html'
+        }
+    },
+    {
+        path: 'wizardsettings.html',
+        pageProps: {
+            controller: 'wizard/settings/index',
+            view: 'wizard/settings/index.html'
+        }
+    },
+    {
+        path: 'wizardstart.html',
+        pageProps: {
+            controller: 'wizard/start/index',
+            view: 'wizard/start/index.html'
+        }
+    },
+    {
+        path: 'wizarduser.html',
+        pageProps: {
+            controller: 'wizard/user/index',
+            view: 'wizard/user/index.html'
+        }
+    }
+];

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

@@ -0,0 +1,108 @@
+import { LegacyRoute } from '../../../../components/router/LegacyRoute';
+
+export const LEGACY_USER_ROUTES: LegacyRoute[] = [
+    {
+        path: 'details',
+        pageProps: {
+            controller: 'itemDetails/index',
+            view: 'itemDetails/index.html'
+        }
+    }, {
+        path: 'list.html',
+        pageProps: {
+            controller: 'list',
+            view: 'list.html'
+        }
+    }, {
+        path: 'livetv.html',
+        pageProps: {
+            controller: 'livetv/livetvsuggested',
+            view: 'livetv.html'
+        }
+    }, {
+        path: 'music.html',
+        pageProps: {
+            controller: 'music/musicrecommended',
+            view: 'music/music.html'
+        }
+    }, {
+        path: 'mypreferencesmenu.html',
+        pageProps: {
+            controller: 'user/menu/index',
+            view: 'user/menu/index.html'
+        }
+    }, {
+        path: 'mypreferencescontrols.html',
+        pageProps: {
+            controller: 'user/controls/index',
+            view: 'user/controls/index.html'
+        }
+    }, {
+        path: 'mypreferencesdisplay.html',
+        pageProps: {
+            controller: 'user/display/index',
+            view: 'user/display/index.html'
+        }
+    }, {
+        path: 'mypreferenceshome.html',
+        pageProps: {
+            controller: 'user/home/index',
+            view: 'user/home/index.html'
+        }
+    }, {
+        path: 'mypreferencesquickconnect.html',
+        pageProps: {
+            controller: 'user/quickConnect/index',
+            view: 'user/quickConnect/index.html'
+        }
+    }, {
+        path: 'mypreferencesplayback.html',
+        pageProps: {
+            controller: 'user/playback/index',
+            view: 'user/playback/index.html'
+        }
+    }, {
+        path: 'mypreferencessubtitles.html',
+        pageProps: {
+            controller: 'user/subtitles/index',
+            view: 'user/subtitles/index.html'
+        }
+    }, {
+        path: 'tv.html',
+        pageProps: {
+            controller: 'shows/tvrecommended',
+            view: 'shows/tvrecommended.html'
+        }
+    }, {
+        path: 'video',
+        pageProps: {
+            controller: 'playback/video/index',
+            view: 'playback/video/index.html',
+            type: 'video-osd',
+            isFullscreen: true,
+            isNowPlayingBarEnabled: false,
+            isThemeMediaSupported: true
+        }
+    }, {
+        path: 'queue',
+        pageProps: {
+            controller: 'playback/queue/index',
+            view: 'playback/queue/index.html',
+            isFullscreen: true,
+            isNowPlayingBarEnabled: false,
+            isThemeMediaSupported: true
+        }
+    }, {
+        path: 'home.html',
+        pageProps: {
+            controller: 'home',
+            view: 'home.html'
+        }
+    }, {
+        path: 'movies.html',
+        pageProps: {
+            controller: 'movies/moviesrecommended',
+            view: 'movies/movies.html'
+        }
+    }
+];

src/apps/stable/routes/search.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import Page from '../components/Page';
+import Page from '../../../components/Page';
-import SearchFields from '../components/search/SearchFields';
+import SearchFields from '../../../components/search/SearchFields';
-import SearchResults from '../components/search/SearchResults';
+import SearchResults from '../../../components/search/SearchResults';
-import SearchSuggestions from '../components/search/SearchSuggestions';
+import SearchSuggestions from '../../../components/search/SearchSuggestions';
-import LiveTVSearchResults from '../components/search/LiveTVSearchResults';
+import LiveTVSearchResults from '../../../components/search/LiveTVSearchResults';
-import globalize from '../scripts/globalize';
+import globalize from '../../../scripts/globalize';
 
 const Search: FunctionComponent = () => {
     const [ query, setQuery ] = useState<string>();
@@ -19,9 +19,8 @@ const Search: FunctionComponent = () => {
             className='mainAnimatedPage libraryPage allLibraryPage noSecondaryNavPage'
         >
             <SearchFields onSearch={setQuery} />
-            {!query &&
+            {!query
-                <SearchSuggestions
+                && <SearchSuggestions
-                    serverId={searchParams.get('serverId') || window.ApiClient.serverId()}
                     parentId={searchParams.get('parentId')}
                 />
             }

src/apps/stable/routes/user/useredit.tsx

@@ -1,28 +1,43 @@
 import type { SyncPlayUserAccessType, UserDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
-import Dashboard from '../../utils/dashboard';
-import globalize from '../../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
-import ButtonElement from '../../elements/ButtonElement';
-import CheckBoxElement from '../../elements/CheckBoxElement';
-import InputElement from '../../elements/InputElement';
-import LinkEditUserPreferences from '../../components/dashboard/users/LinkEditUserPreferences';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
-import SectionTabs from '../../components/dashboard/users/SectionTabs';
-import loading from '../../components/loading/loading';
-import toast from '../../components/toast/toast';
-import { getParameterByName } from '../../utils/url';
 import escapeHTML from 'escape-html';
-import SelectElement from '../../elements/SelectElement';
+
-import Page from '../../components/Page';
+import Dashboard from '../../../../utils/dashboard';
+import globalize from '../../../../scripts/globalize';
+import LibraryMenu from '../../../../scripts/libraryMenu';
+import ButtonElement from '../../../../elements/ButtonElement';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import InputElement from '../../../../elements/InputElement';
+import LinkEditUserPreferences from '../../../../components/dashboard/users/LinkEditUserPreferences';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import { getParameterByName } from '../../../../utils/url';
+import SelectElement from '../../../../elements/SelectElement';
+import Page from '../../../../components/Page';
 
 type ResetProvider = AuthProvider & {
     checkedAttribute: string
-}
+};
 
 type AuthProvider = {
     Name?: string;
     Id?: string;
+};
+
+const getCheckedElementDataIds = (elements: NodeListOf<Element>) => (
+    Array.prototype.filter.call(elements, e => e.checked)
+        .map(e => e.getAttribute('data-id'))
+);
+
+function onSaveComplete() {
+    Dashboard.navigate('userprofiles.html')
+        .catch(err => {
+            console.error('[useredit] failed to navigate to user profile', err);
+        });
+    loading.hide();
+    toast(globalize.translate('SettingsSaved'));
 }
 
 const UserEdit: FunctionComponent = () => {
@@ -56,7 +71,7 @@ const UserEdit: FunctionComponent = () => {
         }
 
         const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider') as HTMLDivElement;
-        providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide');
+        fldSelectLoginProvider.classList.toggle('hide', providers.length <= 1);
 
         setAuthProviders(providers);
 
@@ -73,7 +88,7 @@ const UserEdit: FunctionComponent = () => {
         }
 
         const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider') as HTMLDivElement;
-        providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide');
+        fldSelectPasswordResetProvider.classList.toggle('hide', providers.length <= 1);
 
         setPasswordResetProviders(providers);
 
@@ -121,6 +136,8 @@ const UserEdit: FunctionComponent = () => {
             const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
             chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion;
             triggerChange(chkEnableDeleteAllFolders);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch channels', err);
         });
     }, []);
 
@@ -134,18 +151,24 @@ const UserEdit: FunctionComponent = () => {
 
         window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
             loadAuthProviders(user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch auth providers', err);
         });
         window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) {
             loadPasswordResetProviders(user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch password reset providers', err);
         });
         window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
             IsHidden: false
         })).then(function (folders) {
             loadDeleteFolders(user, folders.Items);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch media folders', err);
         });
 
         const disabledUserBanner = page.querySelector('.disabledUserBanner') as HTMLDivElement;
-        user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide');
+        disabledUserBanner.classList.toggle('hide', !user.Policy.IsDisabled);
 
         const txtUserName = page.querySelector('#txtUserName') as HTMLInputElement;
         txtUserName.disabled = false;
@@ -159,6 +182,7 @@ const UserEdit: FunctionComponent = () => {
         (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = user.Policy.IsAdministrator;
         (page.querySelector('.chkDisabled') as HTMLInputElement).checked = user.Policy.IsDisabled;
         (page.querySelector('.chkIsHidden') as HTMLInputElement).checked = user.Policy.IsHidden;
+        (page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked = user.Policy.EnableCollectionManagement;
         (page.querySelector('.chkRemoteControlSharedDevices') as HTMLInputElement).checked = user.Policy.EnableSharedDeviceControl;
         (page.querySelector('.chkEnableRemoteControlOtherUsers') as HTMLInputElement).checked = user.Policy.EnableRemoteControlOfOtherUsers;
         (page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked = user.Policy.EnableContentDownloading;
@@ -184,6 +208,8 @@ const UserEdit: FunctionComponent = () => {
         loading.show();
         getUser().then(function (user) {
             loadUser(user);
+        }).catch(err => {
+            console.error('[useredit] failed to load data', err);
         });
     }, [loadUser]);
 
@@ -197,19 +223,9 @@ const UserEdit: FunctionComponent = () => {
 
         loadData();
 
-        function onSaveComplete() {
-            Dashboard.navigate('userprofiles.html');
-            loading.hide();
-            toast(globalize.translate('SettingsSaved'));
-        }
-
         const saveUser = (user: UserDto) => {
-            if (!user.Id) {
+            if (!user.Id || !user.Policy) {
-                throw new Error('Unexpected null user.Id');
+                throw new Error('Unexpected null user id or policy');
-            }
-
-            if (!user.Policy) {
-                throw new Error('Unexpected null user.Policy');
             }
 
             user.Name = (page.querySelector('#txtUserName') as HTMLInputElement).value;
@@ -224,27 +240,25 @@ const UserEdit: FunctionComponent = () => {
             user.Policy.EnableAudioPlaybackTranscoding = (page.querySelector('.chkEnableAudioPlaybackTranscoding') as HTMLInputElement).checked;
             user.Policy.EnableVideoPlaybackTranscoding = (page.querySelector('.chkEnableVideoPlaybackTranscoding') as HTMLInputElement).checked;
             user.Policy.EnablePlaybackRemuxing = (page.querySelector('.chkEnableVideoPlaybackRemuxing') as HTMLInputElement).checked;
+            user.Policy.EnableCollectionManagement = (page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked;
             user.Policy.ForceRemoteSourceTranscoding = (page.querySelector('.chkForceRemoteSourceTranscoding') as HTMLInputElement).checked;
             user.Policy.EnableContentDownloading = (page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked;
             user.Policy.EnableRemoteAccess = (page.querySelector('.chkRemoteAccess') as HTMLInputElement).checked;
             user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat((page.querySelector('#txtRemoteClientBitrateLimit') as HTMLInputElement).value || '0'));
-            user.Policy.LoginAttemptsBeforeLockout = parseInt((page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value || '0');
+            user.Policy.LoginAttemptsBeforeLockout = parseInt((page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value || '0', 10);
-            user.Policy.MaxActiveSessions = parseInt((page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value || '0');
+            user.Policy.MaxActiveSessions = parseInt((page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value || '0', 10);
             user.Policy.AuthenticationProviderId = (page.querySelector('#selectLoginProvider') as HTMLSelectElement).value;
             user.Policy.PasswordResetProviderId = (page.querySelector('#selectPasswordResetProvider') as HTMLSelectElement).value;
             user.Policy.EnableContentDeletion = (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).checked;
-            user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (c) {
+            user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : getCheckedElementDataIds(page.querySelectorAll('.chkFolder'));
-                return c.checked;
-            }).map(function (c) {
-                return c.getAttribute('data-id');
-            });
-            if (window.ApiClient.isMinServerVersion('10.6.0')) {
             user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;
-            }
+
-            window.ApiClient.updateUser(user).then(function () {
+            window.ApiClient.updateUser(user).then(() => (
-                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || {}).then(function () {
+                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || {})
+            )).then(() => {
                 onSaveComplete();
-                });
+            }).catch(err => {
+                console.error('[useredit] failed to update user', err);
             });
         };
 
@@ -252,6 +266,8 @@ const UserEdit: FunctionComponent = () => {
             loading.show();
             getUser().then(function (result) {
                 saveUser(result);
+            }).catch(err => {
+                console.error('[useredit] failed to fetch user', err);
             });
             e.preventDefault();
             e.stopPropagation();
@@ -259,16 +275,13 @@ const UserEdit: FunctionComponent = () => {
         };
 
         (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
-            if (this.checked) {
+            (page.querySelector('.deleteAccess') as HTMLDivElement).classList.toggle('hide', this.checked);
-                (page.querySelector('.deleteAccess') as HTMLDivElement).classList.add('hide');
-            } else {
-                (page.querySelector('.deleteAccess') as HTMLDivElement).classList.remove('hide');
-            }
         });
 
         window.ApiClient.getNamedConfiguration('network').then(function (config) {
-            const fldRemoteAccess = page.querySelector('.fldRemoteAccess') as HTMLDivElement;
+            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !config.EnableRemoteAccess);
-            config.EnableRemoteAccess ? fldRemoteAccess.classList.remove('hide') : fldRemoteAccess.classList.add('hide');
+        }).catch(err => {
+            console.error('[useredit] failed to load network config', err);
         });
 
         (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
@@ -375,6 +388,11 @@ const UserEdit: FunctionComponent = () => {
                         className='chkIsAdmin'
                         title='OptionAllowUserToManageServer'
                     />
+                    <CheckBoxElement
+                        labelClassName='checkboxContainer'
+                        className='chkEnableCollectionManagement'
+                        title='AllowCollectionManagement'
+                    />
                     <div id='featureAccessFields' className='verticalSection'>
                         <h2 className='paperListLabel'>
                             {globalize.translate('HeaderFeatureAccess')}

src/apps/stable/routes/user/userlibraryaccess.tsx

@@ -1,24 +1,24 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 
-import loading from '../../components/loading/loading';
+import loading from '../../../../components/loading/loading';
-import libraryMenu from '../../scripts/libraryMenu';
+import libraryMenu from '../../../../scripts/libraryMenu';
-import globalize from '../../scripts/globalize';
+import globalize from '../../../../scripts/globalize';
-import toast from '../../components/toast/toast';
+import toast from '../../../../components/toast/toast';
-import SectionTabs from '../../components/dashboard/users/SectionTabs';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
-import ButtonElement from '../../elements/ButtonElement';
+import ButtonElement from '../../../../elements/ButtonElement';
-import { getParameterByName } from '../../utils/url';
+import { getParameterByName } from '../../../../utils/url';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import AccessContainer from '../../components/dashboard/users/AccessContainer';
+import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
-import CheckBoxElement from '../../elements/CheckBoxElement';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
-import Page from '../../components/Page';
+import Page from '../../../../components/Page';
 
 type ItemsArr = {
     Name?: string;
     Id?: string;
     AppName?: string;
     checkedAttribute?: string
-}
+};
 
 const UserLibraryAccess: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
@@ -148,6 +148,8 @@ const UserLibraryAccess: FunctionComponent = () => {
         const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
         Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
             loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
+        }).catch(err => {
+            console.error('[userlibraryaccess] failed to load data', err);
         });
     }, [loadUser]);
 
@@ -166,6 +168,8 @@ const UserLibraryAccess: FunctionComponent = () => {
             const userId = getParameterByName('userId');
             window.ApiClient.getUser(userId).then(function (result) {
                 saveUser(result);
+            }).catch(err => {
+                console.error('[userlibraryaccess] failed to fetch user', err);
             });
             e.preventDefault();
             e.stopPropagation();
@@ -203,6 +207,8 @@ const UserLibraryAccess: FunctionComponent = () => {
             user.Policy.BlockedMediaFolders = null;
             window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
                 onSaveComplete();
+            }).catch(err => {
+                console.error('[userlibraryaccess] failed to update user policy', err);
             });
         };
 

src/apps/stable/routes/user/usernew.tsx

@@ -1,25 +1,25 @@
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 
-import Dashboard from '../../utils/dashboard';
+import Dashboard from '../../../../utils/dashboard';
-import globalize from '../../scripts/globalize';
+import globalize from '../../../../scripts/globalize';
-import loading from '../../components/loading/loading';
+import loading from '../../../../components/loading/loading';
-import toast from '../../components/toast/toast';
+import toast from '../../../../components/toast/toast';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import InputElement from '../../elements/InputElement';
+import InputElement from '../../../../elements/InputElement';
-import ButtonElement from '../../elements/ButtonElement';
+import ButtonElement from '../../../../elements/ButtonElement';
-import AccessContainer from '../../components/dashboard/users/AccessContainer';
+import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
-import CheckBoxElement from '../../elements/CheckBoxElement';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
-import Page from '../../components/Page';
+import Page from '../../../../components/Page';
 
 type userInput = {
     Name?: string;
     Password?: string;
-}
+};
 
 type ItemsArr = {
     Name?: string;
     Id?: string;
-}
+};
 
 const UserNew: FunctionComponent = () => {
     const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
@@ -93,6 +93,8 @@ const UserNew: FunctionComponent = () => {
             loadMediaFolders(responses[0].Items);
             loadChannels(responses[1].Items);
             loading.hide();
+        }).catch(err => {
+            console.error('[usernew] failed to load data', err);
         });
     }, [loadChannels, loadMediaFolders]);
 
@@ -111,12 +113,8 @@ const UserNew: FunctionComponent = () => {
             userInput.Name = (page.querySelector('#txtUsername') as HTMLInputElement).value;
             userInput.Password = (page.querySelector('#txtPassword') as HTMLInputElement).value;
             window.ApiClient.createUser(userInput).then(function (user) {
-                if (!user.Id) {
+                if (!user.Id || !user.Policy) {
-                    throw new Error('Unexpected null user.Id');
+                    throw new Error('Unexpected null user id or policy');
-                }
-
-                if (!user.Policy) {
-                    throw new Error('Unexpected null user.Policy');
                 }
 
                 user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
@@ -142,7 +140,12 @@ const UserNew: FunctionComponent = () => {
                 }
 
                 window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-                    Dashboard.navigate('useredit.html?userId=' + user.Id);
+                    Dashboard.navigate('useredit.html?userId=' + user.Id)
+                        .catch(err => {
+                            console.error('[usernew] failed to navigate to edit user page', err);
+                        });
+                }).catch(err => {
+                    console.error('[usernew] failed to update user policy', err);
                 });
             }, function () {
                 toast(globalize.translate('ErrorDefault'));

src/apps/stable/routes/user/userparentalcontrol.tsx

@@ -1,26 +1,27 @@
 import type { AccessSchedule, ParentalRating, UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { DynamicDayOfWeek } from '@jellyfin/sdk/lib/generated-client/models/dynamic-day-of-week';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
-import globalize from '../../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
-import AccessScheduleList from '../../components/dashboard/users/AccessScheduleList';
-import BlockedTagList from '../../components/dashboard/users/BlockedTagList';
-import ButtonElement from '../../elements/ButtonElement';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
-import SectionTabs from '../../components/dashboard/users/SectionTabs';
-import loading from '../../components/loading/loading';
-import toast from '../../components/toast/toast';
-import { getParameterByName } from '../../utils/url';
-import CheckBoxElement from '../../elements/CheckBoxElement';
 import escapeHTML from 'escape-html';
-import SelectElement from '../../elements/SelectElement';
+
-import Page from '../../components/Page';
+import globalize from '../../../../scripts/globalize';
+import LibraryMenu from '../../../../scripts/libraryMenu';
+import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList';
+import BlockedTagList from '../../../../components/dashboard/users/BlockedTagList';
+import ButtonElement from '../../../../elements/ButtonElement';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import { getParameterByName } from '../../../../utils/url';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import SelectElement from '../../../../elements/SelectElement';
+import Page from '../../../../components/Page';
 
 type UnratedItem = {
     name: string;
     value: string;
     checkedAttribute: string
-}
+};
 
 const UserParentalControl: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
@@ -142,7 +143,7 @@ const UserParentalControl: FunctionComponent = () => {
 
         for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) {
             btnDelete.addEventListener('click', function () {
-                const index = parseInt(btnDelete.getAttribute('data-index') || '0', 10);
+                const index = parseInt(btnDelete.getAttribute('data-index') ?? '0', 10);
                 schedules.splice(index, 1);
                 const newindex = schedules.filter(function (i: number) {
                     return i != index;
@@ -196,6 +197,8 @@ const UserParentalControl: FunctionComponent = () => {
         const promise2 = window.ApiClient.getParentalRatings();
         Promise.all([promise1, promise2]).then(function (responses) {
             loadUser(responses[0], responses[1]);
+        }).catch(err => {
+            console.error('[userparentalcontrol] failed to load data', err);
         });
     }, [loadUser]);
 
@@ -215,15 +218,11 @@ const UserParentalControl: FunctionComponent = () => {
         };
 
         const saveUser = (user: UserDto) => {
-            if (!user.Id) {
+            if (!user.Id || !user.Policy) {
-                throw new Error('Unexpected null user.Id');
+                throw new Error('Unexpected null user id or policy');
             }
 
-            if (!user.Policy) {
+            const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
-                throw new Error('Unexpected null user.Policy');
-            }
-
-            const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value || '0', 10);
             user.Policy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
             user.Policy.BlockUnratedItems = Array.prototype.filter.call(page.querySelectorAll('.chkUnratedItem'), function (i) {
                 return i.checked;
@@ -234,12 +233,14 @@ const UserParentalControl: FunctionComponent = () => {
             user.Policy.BlockedTags = getBlockedTagsFromPage();
             window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
                 onSaveComplete();
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to update user policy', err);
             });
         };
 
         const showSchedulePopup = (schedule: AccessSchedule, index: number) => {
             schedule = schedule || {};
-            import('../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
+            import('../../../../components/accessSchedule/accessSchedule').then(({ default: accessschedule }) => {
                 accessschedule.show({
                     schedule: schedule
                 }).then(function (updatedSchedule) {
@@ -251,7 +252,11 @@ const UserParentalControl: FunctionComponent = () => {
 
                     schedules[index] = updatedSchedule;
                     renderAccessSchedule(schedules);
+                }).catch(() => {
+                    // access schedule closed
                 });
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to load access schedule', err);
             });
         };
 
@@ -272,7 +277,7 @@ const UserParentalControl: FunctionComponent = () => {
         };
 
         const showBlockedTagPopup = () => {
-            import('../../components/prompt/prompt').then(({default: prompt}) => {
+            import('../../../../components/prompt/prompt').then(({ default: prompt }) => {
                 prompt({
                     label: globalize.translate('LabelTag')
                 }).then(function (value) {
@@ -282,7 +287,11 @@ const UserParentalControl: FunctionComponent = () => {
                         tags.push(value);
                         loadBlockedTags(tags);
                     }
+                }).catch(() => {
+                    // prompt closed
                 });
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to load prompt', err);
             });
         };
 
@@ -291,6 +300,8 @@ const UserParentalControl: FunctionComponent = () => {
             const userId = getParameterByName('userId');
             window.ApiClient.getUser(userId).then(function (result) {
                 saveUser(result);
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to fetch user', err);
             });
             e.preventDefault();
             e.stopPropagation();
@@ -379,9 +390,9 @@ const UserParentalControl: FunctionComponent = () => {
                             isLinkVisible={false}
                         />
                         <div className='blockedTags' style={{ marginTop: '.5em' }}>
-                            {blockedTags.map((tag, index) => {
+                            {blockedTags.map(tag => {
                                 return <BlockedTagList
-                                    key={index}
+                                    key={tag}
                                     tag={tag}
                                 />;
                             })}
@@ -401,7 +412,7 @@ const UserParentalControl: FunctionComponent = () => {
                         <div className='accessScheduleList paperList'>
                             {accessSchedules.map((accessSchedule, index) => {
                                 return <AccessScheduleList
-                                    key={index}
+                                    key={accessSchedule.Id}
                                     index={index}
                                     Id={accessSchedule.Id}
                                     DayOfWeek={accessSchedule.DayOfWeek}

src/apps/stable/routes/user/userpassword.tsx

@@ -1,10 +1,11 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import SectionTabs from '../../components/dashboard/users/SectionTabs';
+
-import UserPasswordForm from '../../components/dashboard/users/UserPasswordForm';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
-import { getParameterByName } from '../../utils/url';
+import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
+import { getParameterByName } from '../../../../utils/url';
-import Page from '../../components/Page';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import loading from '../../components/loading/loading';
+import Page from '../../../../components/Page';
+import loading from '../../../../components/loading/loading';
 
 const UserPassword: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -18,6 +19,8 @@ const UserPassword: FunctionComponent = () => {
             }
             setUserName(user.Name);
             loading.hide();
+        }).catch(err => {
+            console.error('[userpassword] failed to fetch user', err);
         });
     }, [userId]);
     useEffect(() => {

src/apps/stable/routes/user/userprofile.tsx

@@ -2,17 +2,17 @@ import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import React, { FunctionComponent, useEffect, useState, useRef, useCallback } from 'react';
 
-import Dashboard from '../../utils/dashboard';
+import Dashboard from '../../../../utils/dashboard';
-import globalize from '../../scripts/globalize';
+import globalize from '../../../../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
+import LibraryMenu from '../../../../scripts/libraryMenu';
-import { appHost } from '../../components/apphost';
+import { appHost } from '../../../../components/apphost';
-import confirm from '../../components/confirm/confirm';
+import confirm from '../../../../components/confirm/confirm';
-import ButtonElement from '../../elements/ButtonElement';
+import ButtonElement from '../../../../elements/ButtonElement';
-import UserPasswordForm from '../../components/dashboard/users/UserPasswordForm';
+import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
-import loading from '../../components/loading/loading';
+import loading from '../../../../components/loading/loading';
-import toast from '../../components/toast/toast';
+import toast from '../../../../components/toast/toast';
-import { getParameterByName } from '../../utils/url';
+import { getParameterByName } from '../../../../utils/url';
-import Page from '../../components/Page';
+import Page from '../../../../components/Page';
 
 const UserProfile: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -30,12 +30,8 @@ const UserProfile: FunctionComponent = () => {
 
         loading.show();
         window.ApiClient.getUser(userId).then(function (user) {
-            if (!user.Name) {
+            if (!user.Name || !user.Id) {
-                throw new Error('Unexpected null user.Name');
+                throw new Error('Unexpected null user name or id');
-            }
-
-            if (!user.Id) {
-                throw new Error('Unexpected null user.Id');
             }
 
             setUserName(user.Name);
@@ -63,8 +59,12 @@ const UserProfile: FunctionComponent = () => {
                     (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
                     (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
                 }
+            }).catch(err => {
+                console.error('[userprofile] failed to get current user', err);
             });
             loading.hide();
+        }).catch(err => {
+            console.error('[userprofile] failed to load data', err);
         });
     }, [userId]);
 
@@ -102,7 +102,7 @@ const UserProfile: FunctionComponent = () => {
             const target = evt.target as HTMLInputElement;
             const file = (target.files as FileList)[0];
 
-            if (!file || !file.type.match('image.*')) {
+            if (!file || !/image.*/.exec(file.type)) {
                 return false;
             }
 
@@ -114,6 +114,8 @@ const UserProfile: FunctionComponent = () => {
                 window.ApiClient.uploadUserImage(userId, ImageType.Primary, file).then(function () {
                     loading.hide();
                     reloadUser();
+                }).catch(err => {
+                    console.error('[userprofile] failed to upload image', err);
                 });
             };
 
@@ -129,7 +131,11 @@ const UserProfile: FunctionComponent = () => {
                 window.ApiClient.deleteUserImage(userId, ImageType.Primary).then(function () {
                     loading.hide();
                     reloadUser();
+                }).catch(err => {
+                    console.error('[userprofile] failed to delete image', err);
                 });
+            }).catch(() => {
+                // confirm dialog closed
             });
         });
 

src/apps/stable/routes/user/userprofiles.tsx

@@ -1,24 +1,25 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { FunctionComponent, useEffect, useState, useRef } from 'react';
-import Dashboard from '../../utils/dashboard';
+
-import globalize from '../../scripts/globalize';
+import Dashboard from '../../../../utils/dashboard';
-import loading from '../../components/loading/loading';
+import globalize from '../../../../scripts/globalize';
-import dom from '../../scripts/dom';
+import loading from '../../../../components/loading/loading';
-import confirm from '../../components/confirm/confirm';
+import dom from '../../../../scripts/dom';
-import UserCardBox from '../../components/dashboard/users/UserCardBox';
+import confirm from '../../../../components/confirm/confirm';
-import SectionTitleContainer from '../../elements/SectionTitleContainer';
+import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
-import '../../elements/emby-button/emby-button';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import '../../elements/emby-button/paper-icon-button-light';
+import '../../../../elements/emby-button/emby-button';
-import '../../components/cardbuilder/card.scss';
+import '../../../../elements/emby-button/paper-icon-button-light';
-import '../../components/indicators/indicators.scss';
+import '../../../../components/cardbuilder/card.scss';
-import '../../assets/css/flexstyles.scss';
+import '../../../../components/indicators/indicators.scss';
-import Page from '../../components/Page';
+import '../../../../styles/flexstyles.scss';
+import Page from '../../../../components/Page';
 
 type MenuEntry = {
     name?: string;
     id?: string;
     icon?: string;
-}
+};
 
 const UserProfiles: FunctionComponent = () => {
     const [ users, setUsers ] = useState<UserDto[]>([]);
@@ -30,6 +31,8 @@ const UserProfiles: FunctionComponent = () => {
         window.ApiClient.getUsers().then(function (result) {
             setUsers(result);
             loading.hide();
+        }).catch(err => {
+            console.error('[userprofiles] failed to fetch users', err);
         });
     };
 
@@ -75,29 +78,42 @@ const UserProfiles: FunctionComponent = () => {
                 icon: 'delete'
             });
 
-            import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
+            import('../../../../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: card,
                     callback: function (id: string) {
                         switch (id) {
                             case 'open':
-                                Dashboard.navigate('useredit.html?userId=' + userId);
+                                Dashboard.navigate('useredit.html?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user edit page', err);
+                                    });
                                 break;
 
                             case 'access':
-                                Dashboard.navigate('userlibraryaccess.html?userId=' + userId);
+                                Dashboard.navigate('userlibraryaccess.html?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user library page', err);
+                                    });
                                 break;
 
                             case 'parentalcontrol':
-                                Dashboard.navigate('userparentalcontrol.html?userId=' + userId);
+                                Dashboard.navigate('userparentalcontrol.html?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to parental control page', err);
+                                    });
                                 break;
 
                             case 'delete':
                                 deleteUser(userId);
                         }
                     }
+                }).catch(() => {
+                    // action sheet closed
                 });
+            }).catch(err => {
+                console.error('[userprofiles] failed to load action sheet', err);
             });
         };
 
@@ -113,7 +129,11 @@ const UserProfiles: FunctionComponent = () => {
                 loading.show();
                 window.ApiClient.deleteUser(id).then(function () {
                     loadData();
+                }).catch(err => {
+                    console.error('[userprofiles] failed to delete user', err);
                 });
+            }).catch(() => {
+                // confirm dialog closed
             });
         };
 
@@ -126,7 +146,10 @@ const UserProfiles: FunctionComponent = () => {
         });
 
         (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
-            Dashboard.navigate('usernew.html');
+            Dashboard.navigate('usernew.html')
+                .catch(err => {
+                    console.error('[userprofiles] failed to navigate to new user page', err);
+                });
         });
     }, []);
 

src/components/AppHeader.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+
+const AppHeader = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/libraryMenu');
+    }, []);
+
+    return (
+        <>
+            <div className='mainDrawer hide'>
+                <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
+            </div>
+            <div className='skinHeader focuscontainer-x' />
+            <div className='mainDrawerHandle' />
+        </>
+    );
+};
+
+export default AppHeader;

src/components/Backdrop.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+
+const Backdrop = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/autoBackdrops');
+    }, []);
+
+    return (
+        <>
+            <div className='backdropContainer' />
+            <div className='backgroundContainer' />
+        </>
+    );
+};
+
+export default Backdrop;

src/components/ConnectionRequired.tsx

@@ -1,9 +1,9 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import type { ConnectResponse } from 'jellyfin-apiclient';
 
 import alert from './alert';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import Loading from './loading/LoadingComponent';
 import ServerConnections from './ServerConnections';
 import globalize from '../scripts/globalize';
@@ -31,12 +31,11 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
     isUserRequired = true
 }) => {
     const navigate = useNavigate();
+    const location = useLocation();
 
     const [ isLoading, setIsLoading ] = useState(true);
 
-    useEffect(() => {
+    const bounce = useCallback(async (connectionResponse: ConnectResponse) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const bounce = async (connectionResponse: ConnectResponse) => {
         switch (connectionResponse.State) {
             case ConnectionState.SignedIn:
                 // Already logged in, bounce to the home page
@@ -45,12 +44,12 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
                 return;
             case ConnectionState.ServerSignIn:
                 // Bounce to the login page
+                if (location.pathname === BounceRoutes.Login) {
+                    setIsLoading(false);
+                } else {
                     console.debug('[ConnectionRequired] not logged in, redirecting to login page');
-                    navigate(BounceRoutes.Login, {
+                    navigate(`${BounceRoutes.Login}?serverid=${connectionResponse.ApiClient.serverId()}`);
-                        state: {
-                            serverid: connectionResponse.ApiClient.serverId()
                 }
-                    });
                 return;
             case ConnectionState.ServerSelection:
                 // Bounce to select server page
@@ -73,14 +72,9 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         }
 
         console.warn('[ConnectionRequired] unhandled connection state', connectionResponse.State);
-        };
+    }, [location.pathname, navigate]);
 
-        const validateConnection = async () => {
+    const handleIncompleteWizard = useCallback(async (firstConnection: ConnectResponse) => {
-            // Check connection status on initial page load
-            const firstConnection = appRouter.firstConnectionResult;
-            appRouter.firstConnectionResult = null;
-
-            if (firstConnection && firstConnection.State !== ConnectionState.SignedIn) {
         if (firstConnection.State === ConnectionState.ServerSignIn) {
             // Verify the wizard is complete
             try {
@@ -105,20 +99,23 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         }
 
         // Bounce to the correct page in the login flow
-                bounce(firstConnection);
+        bounce(firstConnection)
-                return;
+            .catch(err => {
-            }
+                console.error('[ConnectionRequired] failed to bounce', err);
-
+            });
-            // TODO: appRouter will call appHost.exit() if navigating back when you are already at the default route.
+    }, [bounce, navigate]);
-            // This case will need to be handled elsewhere before appRouter can be killed.
 
+    const validateUserAccess = useCallback(async () => {
         const client = ServerConnections.currentApiClient();
 
         // If this is a user route, ensure a user is logged in
         if ((isAdminRequired || isUserRequired) && !client?.isLoggedIn()) {
             try {
                 console.warn('[ConnectionRequired] unauthenticated user attempted to access user route');
-                    bounce(await ServerConnections.connect());
+                bounce(await ServerConnections.connect())
+                    .catch(err => {
+                        console.error('[ConnectionRequired] failed to bounce', err);
+                    });
             } catch (ex) {
                 console.warn('[ConnectionRequired] error bouncing from user route', ex);
             }
@@ -128,10 +125,13 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         // If this is an admin route, ensure the user has access
         if (isAdminRequired) {
             try {
-                    const user = await client.getCurrentUser();
+                const user = await client?.getCurrentUser();
-                    if (!user.Policy.IsAdministrator) {
+                if (!user?.Policy?.IsAdministrator) {
                     console.warn('[ConnectionRequired] normal user attempted to access admin route');
-                        bounce(await ServerConnections.connect());
+                    bounce(await ServerConnections.connect())
+                        .catch(err => {
+                            console.error('[ConnectionRequired] failed to bounce', err);
+                        });
                     return;
                 }
             } catch (ex) {
@@ -141,10 +141,28 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         }
 
         setIsLoading(false);
-        };
+    }, [bounce, isAdminRequired, isUserRequired]);
 
-        validateConnection();
+    useEffect(() => {
-    }, [ isAdminRequired, isUserRequired, navigate ]);
+        // TODO: appRouter will call appHost.exit() if navigating back when you are already at the default route.
+        // This case will need to be handled elsewhere before appRouter can be killed.
+
+        // Check connection status on initial page load
+        const firstConnection = appRouter.firstConnectionResult;
+        appRouter.firstConnectionResult = null;
+
+        if (firstConnection && firstConnection.State !== ConnectionState.SignedIn) {
+            handleIncompleteWizard(firstConnection)
+                .catch(err => {
+                    console.error('[ConnectionRequired] failed to start wizard', err);
+                });
+        } else {
+            validateUserAccess()
+                .catch(err => {
+                    console.error('[ConnectionRequired] failed to validate user access', err);
+                });
+        }
+    }, [handleIncompleteWizard, validateUserAccess]);
 
     if (isLoading) {
         return <Loading />;

src/components/ServerConnections.js

@@ -86,6 +86,10 @@ class ServerConnections extends ConnectionManager {
         return this.localApiClient;
     }
 
+    /**
+     * Gets the ApiClient that is currently connected.
+     * @returns {ApiClient|undefined} apiClient
+     */
     currentApiClient() {
         let apiClient = this.getLocalApiClient();
 

src/components/ServerContentPage.tsx

@@ -0,0 +1,62 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import ServerConnections from './ServerConnections';
+import viewManager from './viewManager/viewManager';
+import globalize from '../scripts/globalize';
+import type { RestoreViewFailResponse } from '../types/viewManager';
+
+interface ServerContentPageProps {
+    view: string
+}
+
+/**
+ * Page component that renders html content from a server request.
+ * Uses the ViewManager to dynamically load and execute the page JS.
+ */
+const ServerContentPage: FunctionComponent<ServerContentPageProps> = ({ view }) => {
+    const location = useLocation();
+
+    useEffect(() => {
+        const loadPage = () => {
+            const viewOptions = {
+                url: location.pathname + location.search,
+                state: location.state,
+                autoFocus: false,
+                options: {
+                    supportsThemeMedia: false,
+                    enableMediaControl: true
+                }
+            };
+
+            viewManager.tryRestoreView(viewOptions)
+                .catch(async (result?: RestoreViewFailResponse) => {
+                    if (!result?.cancelled) {
+                        const apiClient = ServerConnections.currentApiClient();
+
+                        // Fetch the view html from the server and translate it
+                        const viewHtml = await apiClient?.get(apiClient.getUrl(view + location.search))
+                            .then((html: string) => globalize.translateHtml(html));
+
+                        viewManager.loadView({
+                            ...viewOptions,
+                            view: viewHtml
+                        });
+                    }
+                });
+        };
+
+        loadPage();
+    },
+    // location.state is NOT included as a dependency here since dialogs will update state while the current view stays the same
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        view,
+        location.pathname,
+        location.search
+    ]);
+
+    return <></>;
+};
+
+export default ServerContentPage;

src/components/accessSchedule/accessSchedule.js

@@ -1,6 +1,3 @@
-
-/* eslint-disable indent */
-
 /**
  * Module for controlling user parental control from.
  * @module components/accessSchedule/accessSchedule
@@ -19,7 +16,7 @@ import template from './accessSchedule.template.html';
     const pct = hours % 1;
 
     if (pct) {
-            minutes = parseInt(60 * pct);
+        minutes = parseInt(60 * pct, 10);
     }
 
     return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
@@ -28,7 +25,7 @@ import template from './accessSchedule.template.html';
 function populateHours(context) {
     let html = '';
 
-        for (let i = 0; i < 24; i++) {
+    for (let i = 0; i < 24; i += 0.5) {
         html += `<option value="${i}">${getDisplayTime(i)}</option>`;
     }
 
@@ -91,8 +88,6 @@ import template from './accessSchedule.template.html';
     });
 }
 
-/* eslint-enable indent */
-
 export default {
     show: show
 };

src/components/actionSheet/actionSheet.js

@@ -6,7 +6,7 @@ import dom from '../../scripts/dom';
 import '../../elements/emby-button/emby-button';
 import './actionSheet.scss';
 import 'material-design-icons-iconfont';
-import '../../assets/css/scrollstyles.scss';
+import '../../styles/scrollstyles.scss';
 import '../../components/listview/listview.scss';
 
 function getOffsets(elems) {

src/components/activitylog.js

@@ -11,8 +11,6 @@ import alert from './alert';
 import { getLocale } from '../utils/dateFnsLocale.ts';
 import { toBoolean } from '../utils/string.ts';
 
-/* eslint-disable indent */
-
 function getEntryHtml(entry, apiClient) {
     let html = '';
     html += '<div class="listItem listItem-border">';
@@ -64,10 +62,10 @@ import { toBoolean } from '../utils/string.ts';
 
 function reloadData(instance, elem, apiClient, startIndex, limit) {
     if (startIndex == null) {
-            startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0');
+        startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0', 10);
     }
 
-        limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7');
+    limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7', 10);
     const minDate = new Date();
     const hasUserId = toBoolean(elem.getAttribute('data-useractivity'), true);
 
@@ -169,5 +167,3 @@ class ActivityLog {
 }
 
 export default ActivityLog;
-
-/* eslint-enable indent */

src/components/alert.js

@@ -1,10 +1,8 @@
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import browser from '../scripts/browser';
 import dialog from './dialog/dialog';
 import globalize from '../scripts/globalize';
 
-/* eslint-disable indent */
-
 function useNativeAlert() {
     // webOS seems to block modals
     // Tizen 2.x seems to block modals
@@ -43,5 +41,3 @@ import globalize from '../scripts/globalize';
         return dialog.show(options);
     }
 }
-
-/* eslint-enable indent */

src/components/alphaPicker/alphaPicker.js

@@ -1,5 +1,3 @@
-/* eslint-disable indent */
-
 /**
  * Module alphaPicker.
  * @module components/alphaPicker/alphaPicker
@@ -181,7 +179,7 @@ import 'material-design-icons-iconfont';
 
             if (item) {
                 const prefix = item.getAttribute('data-prefix');
-                    if (prefix && prefix.length) {
+                if (prefix?.length) {
                     itemFocusValue = prefix[0];
                     if (itemFocusTimeout) {
                         clearTimeout(itemFocusTimeout);
@@ -320,5 +318,4 @@ import 'material-design-icons-iconfont';
     }
 }
 
-/* eslint-enable indent */
 export default AlphaPicker;

src/components/apphost.js

@@ -366,20 +366,20 @@ export const appHost = {
         };
     },
     deviceName: function () {
-        return window.NativeShell?.AppHost?.deviceName
+        return window.NativeShell?.AppHost?.deviceName ?
-            ? window.NativeShell.AppHost.deviceName() : getDeviceName();
+            window.NativeShell.AppHost.deviceName() : getDeviceName();
     },
     deviceId: function () {
-        return window.NativeShell?.AppHost?.deviceId
+        return window.NativeShell?.AppHost?.deviceId ?
-            ? window.NativeShell.AppHost.deviceId() : getDeviceId();
+            window.NativeShell.AppHost.deviceId() : getDeviceId();
     },
     appName: function () {
-        return window.NativeShell?.AppHost?.appName
+        return window.NativeShell?.AppHost?.appName ?
-            ? window.NativeShell.AppHost.appName() : appName;
+            window.NativeShell.AppHost.appName() : appName;
     },
     appVersion: function () {
-        return window.NativeShell?.AppHost?.appVersion
+        return window.NativeShell?.AppHost?.appVersion ?
-            ? window.NativeShell.AppHost.appVersion() : Package.version;
+            window.NativeShell.AppHost.appVersion() : Package.version;
     },
     getPushTokenInfo: function () {
         return {};

src/components/autoFocuser.js

@@ -1,5 +1,3 @@
-/* eslint-disable indent */
-
 /**
  * Module for performing auto-focus.
  * @module components/autoFocuser
@@ -94,8 +92,6 @@ import layoutManager from './layoutManager';
     return focusedElement;
 }
 
-/* eslint-enable indent */
-
 export default {
     isEnabled: isEnabled,
     enable: enable,

src/components/backdrop/backdrop.js

@@ -7,8 +7,6 @@ import ServerConnections from '../ServerConnections';
 
 import './backdrop.scss';
 
-/* eslint-disable indent */
-
 function enableAnimation() {
     return !browser.slow;
 }
@@ -282,8 +280,6 @@ import './backdrop.scss';
     }
 }
 
-/* eslint-enable indent */
-
 /**
  * @enum TransparencyLevel
  */

src/components/cardbuilder/card.scss

@@ -114,7 +114,7 @@ button::-moz-focus-inner {
 }
 
 .card.show-animation:focus > .cardBox {
-    transform: scale(1.18, 1.18);
+    transform: scale(1.07, 1.07);
 }
 
 .cardBox-bottompadded {

src/components/cardbuilder/cardBuilder.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 
 /**
  * Module for building cards from item data.
@@ -18,11 +17,12 @@ import browser from '../../scripts/browser';
 import { playbackManager } from '../playback/playbackmanager';
 import itemShortcuts from '../shortcuts';
 import imageHelper from '../../scripts/imagehelper';
+import { randomInt } from '../../utils/number.ts';
 import './card.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../guide/programs.scss';
 import ServerConnections from '../ServerConnections';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -640,16 +640,6 @@ import { appRouter } from '../appRouter';
     };
 }
 
-        /**
-         * Generates a random integer in a given range.
-         * @param {number} min - Minimum of the range.
-         * @param {number} max - Maximum of the range.
-         * @returns {number} Randomly generated number.
-         */
-        function getRandomInt(min, max) {
-            return Math.floor(Math.random() * (max - min + 1)) + min;
-        }
-
 /**
          * Generates an index used to select the default color of a card based on a string.
          * @param {?string} [str] - String to use for generating the index.
@@ -663,13 +653,13 @@ import { appRouter } from '../appRouter';
         const character = String(str.slice(charIndex, charIndex + 1).charCodeAt());
         let sum = 0;
         for (let i = 0; i < character.length; i++) {
-                    sum += parseInt(character.charAt(i));
+            sum += parseInt(character.charAt(i), 10);
         }
         const index = String(sum).slice(-1);
 
         return (index % numRandomColors) + 1;
     } else {
-                return getRandomInt(1, numRandomColors);
+        return randomInt(1, numRandomColors);
     }
 }
 
@@ -689,9 +679,8 @@ import { appRouter } from '../appRouter';
 
     let valid = 0;
 
-            for (let i = 0; i < lines.length; i++) {
+    for (const text of lines) {
         let currentCssClass = cssClass;
-                const text = lines[i];
 
         if (valid > 0 && isOuterFooter) {
             currentCssClass += ' cardText-secondary';
@@ -773,27 +762,24 @@ import { appRouter } from '../appRouter';
          * @param {Object} item - Item used to generate the footer text.
          * @param {Object} apiClient - API client instance.
          * @param {Object} options - Options used to generate the footer text.
-         * @param {string} showTitle - Flag to show the title in the footer.
-         * @param {boolean} forceName - Flag to force showing the name of the item.
-         * @param {boolean} overlayText - Flag to show overlay text.
-         * @param {Object} imgUrl - Object representing the card's image URL.
          * @param {string} footerClass - CSS classes of the footer element.
          * @param {string} progressHtml - HTML markup of the progress bar element.
-         * @param {string} logoUrl - URL of the logo for the item.
+         * @param {Object} flags - Various flags for the footer
-         * @param {boolean} isOuterFooter - Flag to mark the text as outer footer.
+         * @param {Object} urls - Various urls for the footer
          * @returns {string} HTML markup of the card's footer text element.
          */
-        function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, logoUrl, isOuterFooter) {
+function getCardFooterText(item, apiClient, options, footerClass, progressHtml, flags, urls) {
     item = item.ProgramInfo || item;
     let html = '';
 
-            if (logoUrl) {
+    if (urls.logoUrl) {
-                html += '<div class="lazy cardFooterLogo" data-src="' + logoUrl + '"></div>';
+        html += '<div class="lazy cardFooterLogo" data-src="' + urls.logoUrl + '"></div>';
     }
 
-            const showOtherText = isOuterFooter ? !overlayText : overlayText;
+    const showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
+    const showOtherText = flags.isOuterFooter ? !flags.overlayText : flags.overlayText;
 
-            if (isOuterFooter && options.cardLayout && layoutManager.mobile && options.cardFooterAside !== 'none') {
+    if (flags.isOuterFooter && options.cardLayout && layoutManager.mobile && options.cardFooterAside !== 'none') {
         html += `<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
     }
 
@@ -805,7 +791,7 @@ import { appRouter } from '../appRouter';
     let titleAdded;
 
     if (showOtherText && (options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) {
-                if (isOuterFooter && item.Type === 'Episode' && item.SeriesName) {
+        if (flags.isOuterFooter && item.Type === 'Episode' && item.SeriesName) {
             if (item.SeriesId) {
                 lines.push(getTextActionButton({
                     Id: item.SeriesId,
@@ -835,7 +821,7 @@ import { appRouter } from '../appRouter';
     }
 
     let showMediaTitle = (showTitle && !titleAdded) || (options.showParentTitleOrTitle && !lines.length);
-            if (!showMediaTitle && !titleAdded && (showTitle || forceName)) {
+    if (!showMediaTitle && !titleAdded && (showTitle || flags.forceName)) {
         showMediaTitle = true;
     }
 
@@ -856,7 +842,7 @@ import { appRouter } from '../appRouter';
 
     if (showOtherText) {
         if (options.showParentTitle && parentTitleUnderneath) {
-                    if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) {
+            if (flags.isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) {
                 item.AlbumArtists[0].Type = 'MusicArtist';
                 item.AlbumArtists[0].IsFolder = true;
                 lines.push(getTextActionButton(item.AlbumArtists[0], null, serverId));
@@ -875,8 +861,8 @@ import { appRouter } from '../appRouter';
 
         if (options.textLines) {
             const additionalLines = options.textLines(item);
-                    for (let i = 0; i < additionalLines.length; i++) {
+            for (const additionalLine of additionalLines) {
-                        lines.push(additionalLines[i]);
+                lines.push(additionalLine);
             }
         }
 
@@ -991,23 +977,23 @@ import { appRouter } from '../appRouter';
         }
     }
 
-            if ((showTitle || !imgUrl) && forceName && overlayText && lines.length === 1) {
+    if ((showTitle || !urls.imgUrl) && flags.forceName && flags.overlayText && lines.length === 1) {
         lines = [];
     }
 
-            if (overlayText && showTitle) {
+    if (flags.overlayText && showTitle) {
         lines = [escapeHtml(item.Name)];
     }
 
-            const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
+    const addRightTextMargin = flags.isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
 
-            html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines);
+    html += getCardTextLines(lines, cssClass, !options.overlayText, flags.isOuterFooter, options.cardLayout, addRightTextMargin, options.lines);
 
     if (progressHtml) {
         html += progressHtml;
     }
 
-            if (html && (!isOuterFooter || logoUrl || options.cardLayout)) {
+    if (html && (!flags.isOuterFooter || urls.logoUrl || options.cardLayout)) {
         html = '<div class="' + footerClass + '">' + html;
 
         //cardFooter
@@ -1131,7 +1117,6 @@ import { appRouter } from '../appRouter';
 function importRefreshIndicator() {
     if (!refreshIndicatorLoaded) {
         refreshIndicatorLoaded = true;
-                /* eslint-disable-next-line  @babel/no-unused-expressions */
         import('../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator');
     }
 }
@@ -1217,7 +1202,6 @@ import { appRouter } from '../appRouter';
 
     const forceName = imgInfo.forceName;
 
-            const showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
     const overlayText = options.overlayText;
 
     let cardImageContainerClass = 'cardImageContainer';
@@ -1265,7 +1249,7 @@ import { appRouter } from '../appRouter';
         logoUrl = null;
 
         footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
-                innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, false);
+        innerCardFooter += getCardFooterText(item, apiClient, options, footerCssClass, progressHtml, { forceName, overlayText, isOuterFooter: false }, { imgUrl, logoUrl });
         footerOverlayed = true;
     } else if (progressHtml) {
         innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
@@ -1292,7 +1276,7 @@ import { appRouter } from '../appRouter';
             logoUrl = null;
         }
 
-                outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, true);
+        outerCardFooter = getCardFooterText(item, apiClient, options, footerCssClass, progressHtml, { forceName, overlayText, isOuterFooter: true }, { imgUrl, logoUrl });
     }
 
     if (outerCardFooter && !options.cardLayout) {
@@ -1483,7 +1467,6 @@ import { appRouter } from '../appRouter';
     const userData = item.UserData || {};
 
     if (itemHelper.canMarkPlayed(item)) {
-                /* eslint-disable-next-line  @babel/no-unused-expressions */
         import('../../elements/emby-playstatebutton/emby-playstatebutton');
         html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check" aria-hidden="true"></span></button>';
     }
@@ -1491,7 +1474,6 @@ import { appRouter } from '../appRouter';
     if (itemHelper.canRate(item)) {
         const likes = userData.Likes == null ? '' : userData.Likes;
 
-                /* eslint-disable-next-line  @babel/no-unused-expressions */
         import('../../elements/emby-ratingbutton/emby-ratingbutton');
         html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite" aria-hidden="true"></span></button>';
     }
@@ -1738,8 +1720,7 @@ import { appRouter } from '../appRouter';
 export function onTimerCancelled(timerId, itemsContainer) {
     const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
 
-            for (let i = 0; i < cells.length; i++) {
+    for (const cell of cells) {
-                const cell = cells[i];
         const icon = cell.querySelector('.timerIndicator');
         if (icon) {
             icon.parentNode.removeChild(icon);
@@ -1756,8 +1737,7 @@ import { appRouter } from '../appRouter';
 export function onSeriesTimerCancelled(cancelledTimerId, itemsContainer) {
     const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
 
-            for (let i = 0; i < cells.length; i++) {
+    for (const cell of cells) {
-                const cell = cells[i];
         const icon = cell.querySelector('.timerIndicator');
         if (icon) {
             icon.parentNode.removeChild(icon);
@@ -1766,8 +1746,6 @@ import { appRouter } from '../appRouter';
     }
 }
 
-/* eslint-enable indent */
-
 export default {
     getCardsHtml: getCardsHtml,
     getDefaultBackgroundClass: getDefaultBackgroundClass,

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 
 /**
  * Module for building cards from item data.
@@ -128,8 +127,6 @@ import ServerConnections from '../ServerConnections';
     imageLoader.lazyChildren(options.itemsContainer);
 }
 
-/* eslint-enable indent */
-
 export default {
     buildChapterCards: buildChapterCards
 };

src/components/cardbuilder/peoplecardbuilder.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 
 /**
  * Module for building cards from item data.
@@ -20,8 +19,6 @@ import cardBuilder from './cardBuilder';
     cardBuilder.buildCards(items, options);
 }
 
- /* eslint-enable indent */
-
 export default {
     buildPeopleCards: buildPeopleCards
 };

src/components/collectionEditor/collectionEditor.js

@@ -3,7 +3,7 @@ import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import layoutManager from '../layoutManager';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
@@ -12,12 +12,10 @@ import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
 import '../formdialog.scss';
-import '../../assets/css/flexstyles.scss';
+import '../../styles/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 
-/* eslint-disable indent */
-
 let currentServerId;
 
 function onSubmit(e) {
@@ -265,5 +263,4 @@ import toast from '../toast/toast';
     }
 }
 
-/* eslint-enable indent */
 export default CollectionEditor;

src/components/common/AlphaPickerContainer.tsx

@@ -17,9 +17,15 @@ const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings
         const newValue = (e as CustomEvent).detail.value;
         let updatedValue: React.SetStateAction<ViewQuerySettings>;
         if (newValue === '#') {
-            updatedValue = {NameLessThan: 'A'};
+            updatedValue = {
+                NameLessThan: 'A',
+                NameStartsWith: undefined
+            };
         } else {
-            updatedValue = {NameStartsWith: newValue};
+            updatedValue = {
+                NameLessThan: undefined,
+                NameStartsWith: newValue
+            };
         }
         setViewQuerySettings((prevState) => ({
             ...prevState,