Remove trailing extra empty line

- If no filters are applied, disable button
- Apply to both standard and experimental layouts

.escheckrc

@@ -1,6 +1,5 @@
 {
     "ecmaVersion": "es5",
-    "modules": "false",
     "files": "./dist/**/*.js",
     "not": [
         "./dist/libraries/pdf.worker.js",

.eslintignore

@@ -1,5 +0,0 @@
-node_modules
-coverage
-dist
-.idea
-.vscode

.eslintrc.js

@@ -1,339 +0,0 @@
-const restrictedGlobals = require('confusing-browser-globals');
-
-module.exports = {
-    root: true,
-    parser: '@typescript-eslint/parser',
-    plugins: [
-        '@stylistic',
-        '@typescript-eslint',
-        'react',
-        'import',
-        'sonarjs'
-    ],
-    env: {
-        node: true,
-        es6: true,
-        es2017: true,
-        es2020: true
-    },
-    extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        'plugin:import/errors',
-        'plugin:@eslint-community/eslint-comments/recommended',
-        'plugin:compat/recommended',
-        'plugin:sonarjs/recommended'
-    ],
-    rules: {
-        'array-callback-return': ['error', { 'checkForEach': true }],
-        'curly': ['error', 'multi-line', 'consistent'],
-        'default-case-last': ['error'],
-        'max-params': ['error', 7],
-        'new-cap': [
-            'error',
-            {
-                'capIsNewExceptions': ['jQuery.Deferred'],
-                'newIsCapExceptionPattern': '\\.default$'
-            }
-        ],
-        'no-duplicate-imports': ['error'],
-        'no-empty-function': ['error'],
-        'no-extend-native': ['error'],
-        'no-lonely-if': ['error'],
-        '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-throw-literal': ['error'],
-        'no-undef-init': ['error'],
-        'no-unneeded-ternary': ['error'],
-        'no-unused-expressions': ['off'],
-        '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
-        'no-unused-private-class-members': ['error'],
-        'no-useless-rename': ['error'],
-        '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'] }],
-        'one-var': ['error', 'never'],
-        'prefer-const': ['error', { 'destructuring': 'all' }],
-        'prefer-promise-reject-errors': ['warn', { 'allowEmptyReject': true }],
-        '@typescript-eslint/prefer-for-of': ['error'],
-        '@typescript-eslint/prefer-optional-chain': ['error'],
-        'radix': ['error'],
-        'yoda': 'error',
-
-        'react/jsx-filename-extension': ['error', { 'extensions': ['.jsx', '.tsx'] }],
-        'react/jsx-no-bind': ['error'],
-        'react/jsx-no-useless-fragment': ['error'],
-        'react/jsx-no-constructed-context-values': ['error'],
-        'react/no-array-index-key': ['error'],
-
-        'sonarjs/no-inverted-boolean-check': ['error'],
-        // TODO: Enable the following rules and fix issues
-        'sonarjs/cognitive-complexity': ['off'],
-        'sonarjs/no-duplicate-string': ['off'],
-
-        '@stylistic/block-spacing': ['error'],
-        '@stylistic/brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
-        '@stylistic/comma-dangle': ['error', 'never'],
-        '@stylistic/comma-spacing': ['error'],
-        '@stylistic/eol-last': ['error'],
-        '@stylistic/indent': ['error', 4, { 'SwitchCase': 1 }],
-        '@stylistic/jsx-quotes': ['error', 'prefer-single'],
-        '@stylistic/keyword-spacing': ['error'],
-        '@stylistic/max-statements-per-line': ['error'],
-        '@stylistic/no-floating-decimal': ['error'],
-        '@stylistic/no-multi-spaces': ['error'],
-        '@stylistic/no-multiple-empty-lines': ['error', { 'max': 1 }],
-        '@stylistic/no-trailing-spaces': ['error'],
-        '@stylistic/object-curly-spacing': ['error', 'always'],
-        '@stylistic/operator-linebreak': ['error', 'before', { overrides: { '?': 'after', ':': 'after', '=': 'after' } }],
-        '@stylistic/padded-blocks': ['error', 'never'],
-        '@stylistic/quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
-        '@stylistic/semi': ['error'],
-        '@stylistic/space-before-blocks': ['error'],
-        '@stylistic/space-infix-ops': ['error']
-    },
-    settings: {
-        react: {
-            version: 'detect'
-        },
-        'import/parsers': {
-            '@typescript-eslint/parser': [ '.ts', '.tsx' ]
-        },
-        'import/resolver': {
-            node: {
-                extensions: [
-                    '.js',
-                    '.ts',
-                    '.jsx',
-                    '.tsx'
-                ],
-                moduleDirectory: [
-                    'node_modules',
-                    'src'
-                ]
-            }
-        },
-        polyfills: [
-            // Native Promises Only
-            'Promise',
-            // whatwg-fetch
-            'fetch',
-            // document-register-element
-            'document.registerElement',
-            // resize-observer-polyfill
-            'ResizeObserver',
-            // fast-text-encoding
-            'TextEncoder',
-            // intersection-observer
-            'IntersectionObserver',
-            // Core-js
-            'Object.assign',
-            'Object.is',
-            'Object.setPrototypeOf',
-            'Object.toString',
-            'Object.freeze',
-            'Object.seal',
-            'Object.preventExtensions',
-            'Object.isFrozen',
-            'Object.isSealed',
-            'Object.isExtensible',
-            'Object.getOwnPropertyDescriptor',
-            'Object.getPrototypeOf',
-            'Object.keys',
-            'Object.entries',
-            'Object.getOwnPropertyNames',
-            'Function.name',
-            'Function.hasInstance',
-            'Array.from',
-            'Array.arrayOf',
-            'Array.copyWithin',
-            'Array.fill',
-            'Array.find',
-            'Array.findIndex',
-            'Array.iterator',
-            'String.fromCodePoint',
-            'String.raw',
-            'String.iterator',
-            'String.codePointAt',
-            'String.endsWith',
-            'String.includes',
-            'String.repeat',
-            'String.startsWith',
-            'String.trim',
-            'String.anchor',
-            'String.big',
-            'String.blink',
-            'String.bold',
-            'String.fixed',
-            'String.fontcolor',
-            'String.fontsize',
-            'String.italics',
-            'String.link',
-            'String.small',
-            'String.strike',
-            'String.sub',
-            'String.sup',
-            'RegExp',
-            'Number',
-            'Math',
-            'Date',
-            'async',
-            'Symbol',
-            'Map',
-            'Set',
-            'WeakMap',
-            'WeakSet',
-            'ArrayBuffer',
-            'DataView',
-            'Int8Array',
-            'Uint8Array',
-            'Uint8ClampedArray',
-            'Int16Array',
-            'Uint16Array',
-            'Int32Array',
-            'Uint32Array',
-            'Float32Array',
-            'Float64Array',
-            'Reflect',
-            // Temporary while eslint-compat-plugin is buggy
-            'document.querySelector'
-        ]
-    },
-    overrides: [
-        // Config files and development scripts
-        {
-            files: [
-                './babel.config.js',
-                './.eslintrc.js',
-                './postcss.config.js',
-                './webpack.*.js',
-                './scripts/**/*.js'
-            ]
-        },
-        // JavaScript source files
-        {
-            files: [
-                './src/**/*.{js,jsx,ts,tsx}'
-            ],
-            parserOptions: {
-                project: ['./tsconfig.json']
-            },
-            env: {
-                node: false,
-                amd: true,
-                browser: true,
-                es6: true,
-                es2017: true,
-                es2020: true
-            },
-            globals: {
-                // Browser globals
-                'MediaMetadata': 'readonly',
-                // Tizen globals
-                'tizen': 'readonly',
-                'webapis': 'readonly',
-                // WebOS globals
-                'webOS': 'readonly',
-                // Dependency globals
-                '$': 'readonly',
-                'jQuery': 'readonly',
-                // Jellyfin globals
-                'ApiClient': 'writable',
-                'Events': 'writable',
-                'chrome': 'writable',
-                'DlnaProfilePage': 'writable',
-                'DashboardPage': 'writable',
-                'Emby': 'readonly',
-                'Globalize': 'writable',
-                'Hls': 'writable',
-                'LibraryMenu': 'writable',
-                'LinkParser': 'writable',
-                'LiveTvHelpers': 'writable',
-                'Loading': 'writable',
-                'MetadataEditor': 'writable',
-                'ServerNotifications': 'writable',
-                'TaskButton': 'writable',
-                'UserParentalControlPage': 'writable',
-                'Windows': 'readonly',
-                // Build time definitions
-                __COMMIT_SHA__: 'readonly',
-                __JF_BUILD_VERSION__: 'readonly',
-                __PACKAGE_JSON_NAME__: 'readonly',
-                __PACKAGE_JSON_VERSION__: 'readonly',
-                __USE_SYSTEM_FONTS__: 'readonly',
-                __WEBPACK_SERVE__: 'readonly'
-            },
-            rules: {
-                '@typescript-eslint/naming-convention': [
-                    'error',
-                    {
-                        selector: 'default',
-                        format: [ 'camelCase', 'PascalCase' ],
-                        leadingUnderscore: 'allow'
-                    },
-                    {
-                        selector: 'variable',
-                        format: [ 'camelCase', 'PascalCase', 'UPPER_CASE' ],
-                        leadingUnderscore: 'allowSingleOrDouble',
-                        trailingUnderscore: 'allowSingleOrDouble'
-                    },
-                    {
-                        selector: 'typeLike',
-                        format: [ 'PascalCase' ]
-                    },
-                    {
-                        selector: 'enumMember',
-                        format: [ 'PascalCase', 'UPPER_CASE' ]
-                    },
-                    {
-                        selector: [ 'objectLiteralProperty', 'typeProperty' ],
-                        format: [ 'camelCase', 'PascalCase' ],
-                        leadingUnderscore: 'allowSingleOrDouble',
-                        trailingUnderscore: 'allowSingleOrDouble'
-                    },
-                    // Ignore numbers, locale strings (en-us), aria/data attributes, CSS selectors,
-                    // and api_key parameter
-                    {
-                        selector: [ 'objectLiteralProperty', 'typeProperty' ],
-                        format: null,
-                        filter: {
-                            regex: '[ &\\-]|^([0-9]+)$|^api_key$',
-                            match: true
-                        }
-                    }
-                ],
-                '@typescript-eslint/prefer-string-starts-ends-with': ['error']
-            }
-        },
-        // TypeScript source files
-        {
-            files: [
-                './src/**/*.{ts,tsx}'
-            ],
-            extends: [
-                'eslint:recommended',
-                'plugin:import/typescript',
-                'plugin:@typescript-eslint/recommended',
-                'plugin:@eslint-community/eslint-comments/recommended',
-                'plugin:react/recommended',
-                'plugin:react-hooks/recommended',
-                'plugin:jsx-a11y/recommended'
-            ],
-            rules: {
-                '@typescript-eslint/no-floating-promises': ['error'],
-                '@typescript-eslint/no-unused-vars': ['error'],
-
-                'sonarjs/cognitive-complexity': ['error']
-            }
-        }
-    ]
-};

.github/ISSUE_TEMPLATE/1-bug-report.md

@@ -1,32 +0,0 @@
----
-name: Bug Report
-about: You have noticed a general issue or regression, and would like to report it
-labels: bug
----
-
-**Describe The Bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**Steps To Reproduce**
-<!-- Steps to reproduce the behavior: -->
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected Behavior**
-<!-- A clear and concise description of what you expected to happen. -->
-
-**Logs**
-<!-- Please paste any log errors. -->
-
-**Screenshots**
-<!-- If applicable, add screenshots to help explain your problem. -->
-
-**System (please complete the following information):**
- - Platform: [e.g. Linux, Windows, iPhone, Tizen]
- - Browser: [e.g. Firefox, Chrome, Safari]
- - Jellyfin Version: [e.g. 10.6.0]
-
-**Additional Context**
-<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/1-bug-report.yml

@@ -0,0 +1,122 @@
+name: Bug Report
+description: You have noticed a general issue or regression, and would like to report it
+labels:
+  - bug
+body:
+  - type: checkboxes
+    id: before-posting
+    attributes:
+      label: "This issue respects the following points:"
+      description: All conditions are **required**.
+      options:
+        - label: This issue is **not** already reported on [GitHub](https://github.com/jellyfin/jellyfin-web/issues?q=is%3Aissue) _(I've searched it)_.
+          required: true
+        - label: I agree to follow Jellyfin's [Code of Conduct](https://jellyfin.org/docs/general/community-standards.html#code-of-conduct).
+          required: true
+        - label: This report addresses only a single issue; If you encounter multiple issues, kindly create separate reports for each one.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## Bug information  
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: |
+        A clear and concise description of the bug.
+        You can also attach screenshots or screen recordings here to help explain your issue.
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction Steps
+      description: |
+        Steps to reproduce the behavior:
+      placeholder: |
+        1. Go to …
+        2. Click on …
+        3. Scroll down to …
+        4. See error / the app crashes
+    validations:
+      required: true
+  - type: textarea
+    id: behaviour
+    attributes:
+      label: Expected/Actual behaviour
+      description: |
+        Describe the behavior you were expecting versus what actually occurred.
+      placeholder: |
+        I expected the app to... However, the actual behavior was that...
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Please paste any log errors.
+      placeholder: Paste logs…
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment
+  - type: markdown
+    attributes:
+      value: |
+        ### Server
+        You will find these values in your Admin Dashboard
+  - type: input
+    id: server-version
+    attributes:
+      label: Server version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: input
+    id: web-version
+    attributes:
+      label: Web version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: input
+    id: build-version
+    attributes:
+      label: Build version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ### Client
+        Information about the device you are seeing the issue on
+  - type: input
+    id: platform
+    attributes:
+      label: Platform
+      description: Specify the operating system or device where the issue occurs. If relevant, include details like version or model.
+      placeholder: e.g. Linux, Windows, iPhone, Tizen
+    validations:
+      required: true
+  - type: input
+    id: browser
+    attributes:
+      label: Browser
+      description: Indicate which browser you're using when encountering the issue. If possible, mention the browser version as well.
+      placeholder: e.g. Firefox, Chrome, Safari
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## Additional
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: Include any relevant details, resources, or screenshots that might help in understanding or implementing the request.
+      placeholder: Add any additional context here.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2-playback-issue.md

@@ -1,22 +0,0 @@
----
-name: Playback Issue
-about: You have playback issues with some files
-labels: playback
----
-
-**Describe The Bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**Media Information**
-<!-- Please paste any ffprobe or MediaInfo logs. -->
-
-**Screenshots**
-<!-- Add screenshots from the Playback Data and Media Info. -->
-
-**System (please complete the following information):**
- - Platform: [e.g. Linux, Windows, iPhone, Tizen]
- - Browser: [e.g. Firefox, Chrome, Safari]
- - Jellyfin Version: [e.g. 10.6.0]
-
-**Additional Context**
-<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/2-playback-issue.yml

@@ -0,0 +1,145 @@
+name: Playback Issue
+description: Create a bug report related to media playback
+labels:
+  - bug
+  - playback
+body:
+  - type: checkboxes
+    id: before-posting
+    attributes:
+      label: "This issue respects the following points:"
+      description: All conditions are **required**.
+      options:
+        - label: This issue is **not** already reported on [GitHub](https://github.com/jellyfin/jellyfin-web/issues?q=is%3Aissue) _(I've searched it)_.
+          required: true
+        - label: I agree to follow Jellyfin's [Code of Conduct](https://jellyfin.org/docs/general/community-standards.html#code-of-conduct).
+          required: true
+        - label: This report addresses only a single issue; If you encounter multiple issues, kindly create separate reports for each one.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## Bug information  
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: |
+        A clear and concise description of the bug.
+        You can also attach screenshots or screen recordings here to help explain your issue.
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction Steps
+      description: |
+        Steps to reproduce the behavior:
+      placeholder: |
+        1. Go to …
+        2. Click on …
+        3. Scroll down to …
+        4. See error / the app crashes
+    validations:
+      required: true
+  - type: textarea
+    id: behaviour
+    attributes:
+      label: Expected/Actual behaviour
+      description: |
+        Describe the behavior you were expecting versus what actually occurred.
+      placeholder: |
+        I expected the app to... However, the actual behavior was that...
+    validations:
+      required: true
+  - type: textarea
+    id: mediainfo
+    attributes:
+      label: Media info of the file
+      description: |
+        Please share the media information for the file causing issues. You can use a variety of tools to retrieve this information.
+        - Use ffprobe (`ffprobe ./file.mp4`)
+        - Copy the media info from the web interface
+      placeholder: Paste media info…
+      render: shell
+  - type: markdown
+    attributes:
+      value: |
+        ## Logs
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Please paste your logs here if applicable.
+      placeholder: Paste logs…
+  - type: textarea
+    id: logs-ffmpeg
+    attributes:
+      label: FFmpeg logs
+      description: |
+        Please paste your FFmpeg logs here if available. You can find these in your servers dashboard under "logs".
+      placeholder: Paste logs…
+      render: shell
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment
+  - type: markdown
+    attributes:
+      value: |
+        ### Server
+        You will find these values in your Admin Dashboard
+  - type: input
+    id: server-version
+    attributes:
+      label: Server version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: input
+    id: web-version
+    attributes:
+      label: Web version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: input
+    id: build-version
+    attributes:
+      label: Build version
+      placeholder: 10.10.2
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ### Client
+        Information about the device you are seeing the issue on
+  - type: input
+    id: platform
+    attributes:
+      label: Platform
+      description: Specify the operating system or device where the issue occurs. If relevant, include details like version or model.
+      placeholder: e.g. Linux, Windows, iPhone, Tizen
+    validations:
+      required: true
+  - type: input
+    id: browser
+    attributes:
+      label: Browser
+      description: Indicate which browser you're using when encountering the issue. If possible, mention the browser version as well.
+      placeholder: e.g. Firefox, Chrome, Safari
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## Additional
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: Include any relevant details, resources, or screenshots that might help in understanding or implementing the request.
+      placeholder: Add any additional context here.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/3-technical-discussion.md

@@ -1,13 +0,0 @@
----
-name: Technical Discussion
-about: You want to discuss technical aspects of changes you intend to make
-labels: enhancement
----
-
-<!-- Explain the change and the motivations behind it.
-
-For example, if you plan to rely on a new dependency, explain why and what
-it brings to the project.
-
-If you plan to make significant changes, go roughly over the steps you intend
-to take and how you would divide the change in PRs of a manageable size. -->

.github/ISSUE_TEMPLATE/4-meta-issue.md

@@ -1,9 +0,0 @@
----
-name: Meta Issue
-about: You want to track a number of other issues as part of a larger project
-labels: meta
----
-
-* [ ] Issue 1 [#123]
-* [ ] Issue 2 [#456]
-* [ ] ...

.github/renovate.json

@@ -4,17 +4,25 @@
     "github>jellyfin/.github//renovate-presets/nodejs",
     ":dependencyDashboard"
   ],
+  "lockFileMaintenance": {
+    "enabled": false
+  },
   "packageRules": [
     {
       "matchPackageNames": [ "@jellyfin/sdk" ],
       "followTag": "unstable",
       "minimumReleaseAge": null,
+      "prPriority": 5,
       "schedule": [ "after 7:00 am" ]
     },
     {
-      "matchPackageNames": ["dompurify"],
-      "matchUpdateTypes": ["major"],
+      "matchPackageNames": [ "dompurify" ],
+      "matchUpdateTypes": [ "major" ],
       "enabled": false
+    },
+    {
+      "matchPackageNames": [ "hls.js" ],
+      "prPriority": 5
     }
   ]
 }

.github/workflows/__automation.yml

@@ -8,7 +8,7 @@ jobs:
     name: Merge conflict labeling 🏷️
     runs-on: ubuntu-latest
     steps:
-      - uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
+      - uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 # v3.0.3
         with:
           dirtyLabel: 'merge conflict'
           commentOnDirty: 'This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.'

.github/workflows/__codeql.yml

@@ -20,21 +20,21 @@ jobs:
 
     steps:
       - name: Checkout repository ⬇️
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Initialize CodeQL 🛠️
-        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         with:
           queries: security-and-quality
           languages: ${{ matrix.language }}
 
       - name: Autobuild 📦
-        uses: github/codeql-action/autobuild@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/autobuild@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
 
       - name: Perform CodeQL Analysis 🧪
-        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/__deploy.yml

@@ -29,13 +29,13 @@ jobs:
 
     steps:
       - name: Download workflow artifact ⬇️
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
         with:
           name: ${{ inputs.artifact_name }}
           path: dist
 
       - name: Publish to Cloudflare Pages 📃
-        uses: cloudflare/wrangler-action@6d58852c35a27e6034745c5d0bc373d739014f7f # v3.13.0
+        uses: cloudflare/wrangler-action@da0e0dfe58b7a431659754fdf3f186c529afbe65 # v3.14.1
         id: cf
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/__package.yml

@@ -14,12 +14,12 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ inputs.commit || github.sha }}
 
       - name: Setup node environment
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
           cache: npm
@@ -39,7 +39,7 @@ jobs:
           mv dist/config.tmp.json dist/config.json
 
       - name: Upload artifact
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: frontend
           path: dist

.github/workflows/__quality_checks.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Scan
-        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0
+        uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
         with:
           ## Workaround from https://github.com/actions/dependency-review-action/issues/456
           ## TODO: Remove when necessary
@@ -42,13 +42,13 @@ jobs:
 
     steps:
       - name: Checkout ⬇️
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Setup node environment ⚙️
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
           cache: npm

.github/workflows/pull_request.yml

@@ -80,12 +80,12 @@ jobs:
     
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ github.event.pull_request.head.sha }}
     
       - name: Setup node environment
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
           cache: npm
@@ -95,6 +95,6 @@ jobs:
         run: npm ci --no-audit
     
       - name: Run eslint
-        uses: CatChen/eslint-suggestion-action@9c12109c4943f26f0676b71c9c10e456748872cf # v4.1.7
+        uses: CatChen/eslint-suggestion-action@4dda35decf912ab18ea3e071acec2c6c2eda00b6 # v4.1.18
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/schedule.yml

@@ -10,18 +10,17 @@ permissions:
 
 jobs:
   issues:
-    name: Check issues
+    name: Check stale issues and PRs
     runs-on: ubuntu-latest
     if: ${{ contains(github.repository, 'jellyfin/') }}
     steps:
-      - uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
+      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9.1.0
         with:
           repo-token: ${{ secrets.JF_BOT_TOKEN }}
           operations-per-run: 75
+          # Issues receive a stale warning after 120 days and close after an additional 21 days
           days-before-stale: 120
-          days-before-pr-stale: -1
           days-before-close: 21
-          days-before-pr-close: -1
           exempt-issue-labels: regression,security,roadmap,future,feature,enhancement,confirmed
           stale-issue-label: stale
           stale-issue-message: |-
@@ -30,21 +29,10 @@ 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@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.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
+          # PRs are closed after having unresolved merge conflicts for 90 days
+          days-before-pr-stale: 0
+          days-before-pr-close: 90
+          only-pr-labels: merge conflict
+          stale-pr-label: stale
           close-pr-message: |-
             This PR has been closed due to having unresolved merge conflicts.

.gitignore

@@ -16,3 +16,8 @@ config.json
 # vim
 *.sw?
 
+# direnv
+.direnv/
+
+# environment related
+.envrc

.stylelintrc.json

@@ -1,5 +1,6 @@
 {
   "plugins": [
+    "@stylistic/stylelint-plugin",
     "stylelint-no-browser-hacks/lib"
   ],
   "rules": {
@@ -10,20 +11,20 @@
       ],
       "ignore": ["after-comment"]
     } ],
-    "at-rule-name-case": "lower",
-    "at-rule-name-space-after": "always-single-line",
+    "@stylistic/at-rule-name-case": "lower",
+    "@stylistic/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",
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-space-before": "always-single-line",
+    "@stylistic/at-rule-semicolon-newline-after": "always",
+    "@stylistic/block-closing-brace-empty-line-before": "never",
+    "@stylistic/block-closing-brace-newline-after": "always",
+    "@stylistic/block-closing-brace-newline-before": "always-multi-line",
+    "@stylistic/block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always-multi-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
+    "@stylistic/block-opening-brace-newline-after": "always-multi-line",
+    "@stylistic/block-opening-brace-space-after": "always-single-line",
+    "@stylistic/block-opening-brace-space-before": "always",
+    "@stylistic/color-hex-case": "lower",
     "color-hex-length": "short",
     "color-no-invalid-hex": true,
     "comment-empty-line-before": [ "always", {
@@ -42,8 +43,8 @@
         "inside-single-line-block"
       ]
     } ],
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
+    "@stylistic/declaration-bang-space-after": "never",
+    "@stylistic/declaration-bang-space-before": "always",
     "declaration-block-no-duplicate-properties": [
       true,
       {
@@ -51,52 +52,52 @@
       }
     ],
     "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
+    "@stylistic/declaration-block-semicolon-newline-after": "always-multi-line",
+    "@stylistic/declaration-block-semicolon-space-after": "always-single-line",
+    "@stylistic/declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-newline-after": "always-multi-line",
-    "declaration-colon-space-after": "always-single-line",
-    "declaration-colon-space-before": "never",
+    "@stylistic/declaration-block-trailing-semicolon": "always",
+    "@stylistic/declaration-colon-newline-after": "always-multi-line",
+    "@stylistic/declaration-colon-space-after": "always-single-line",
+    "@stylistic/declaration-colon-space-before": "never",
     "font-family-no-duplicate-names": true,
     "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": "always-multi-line",
-    "function-comma-space-after": "always-single-line",
-    "function-comma-space-before": "never",
+    "@stylistic/function-comma-newline-after": "always-multi-line",
+    "@stylistic/function-comma-space-after": "always-single-line",
+    "@stylistic/function-comma-space-before": "never",
     "function-linear-gradient-no-nonstandard-direction": true,
-    "function-max-empty-lines": 0,
+    "@stylistic/function-max-empty-lines": 0,
     "function-name-case": "lower",
-    "function-parentheses-newline-inside": "always-multi-line",
-    "function-parentheses-space-inside": "never-single-line",
-    "function-whitespace-after": "always",
-    "indentation": 4,
+    "@stylistic/function-parentheses-newline-inside": "always-multi-line",
+    "@stylistic/function-parentheses-space-inside": "never-single-line",
+    "@stylistic/function-whitespace-after": "always",
+    "@stylistic/indentation": 4,
     "keyframe-declaration-no-important": true,
     "length-zero-no-unit": true,
-    "max-empty-lines": 1,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
-    "media-feature-name-case": "lower",
+    "@stylistic/max-empty-lines": 1,
+    "@stylistic/media-feature-colon-space-after": "always",
+    "@stylistic/media-feature-colon-space-before": "never",
+    "@stylistic/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",
-    "media-query-list-comma-newline-after": "always-multi-line",
-    "media-query-list-comma-space-after": "always-single-line",
-    "media-query-list-comma-space-before": "never",
+    "@stylistic/media-feature-parentheses-space-inside": "never",
+    "@stylistic/media-feature-range-operator-space-after": "always",
+    "@stylistic/media-feature-range-operator-space-before": "always",
+    "@stylistic/media-query-list-comma-newline-after": "always-multi-line",
+    "@stylistic/media-query-list-comma-space-after": "always-single-line",
+    "@stylistic/media-query-list-comma-space-before": "never",
     "no-descending-specificity": true,
     "no-duplicate-at-import-rules": true,
     "no-duplicate-selectors": true,
     "no-empty-source": true,
-    "no-eol-whitespace": true,
-    "no-extra-semicolons": true,
+    "@stylistic/no-eol-whitespace": true,
+    "@stylistic/no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
-    "no-missing-end-of-source-newline": true,
-    "number-leading-zero": "always",
-    "number-no-trailing-zeros": true,
+    "@stylistic/no-missing-end-of-source-newline": true,
+    "@stylistic/number-leading-zero": "always",
+    "@stylistic/number-no-trailing-zeros": true,
     "plugin/no-browser-hacks": true,
-    "property-case": "lower",
+    "@stylistic/property-case": "lower",
     "property-no-unknown": [
       true,
       {
@@ -110,20 +111,20 @@
       "except": ["first-nested"],
       "ignore": ["after-comment"]
     } ],
-    "selector-attribute-brackets-space-inside": "never",
-    "selector-attribute-operator-space-after": "never",
-    "selector-attribute-operator-space-before": "never",
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-descendant-combinator-no-non-space": true,
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-space-before": "never",
-    "selector-max-empty-lines": 0,
+    "@stylistic/selector-attribute-brackets-space-inside": "never",
+    "@stylistic/selector-attribute-operator-space-after": "never",
+    "@stylistic/selector-attribute-operator-space-before": "never",
+    "@stylistic/selector-combinator-space-after": "always",
+    "@stylistic/selector-combinator-space-before": "always",
+    "@stylistic/selector-descendant-combinator-no-non-space": true,
+    "@stylistic/selector-list-comma-newline-after": "always",
+    "@stylistic/selector-list-comma-space-before": "never",
+    "@stylistic/selector-max-empty-lines": 0,
     "selector-no-vendor-prefix": true,
-    "selector-pseudo-class-case": "lower",
+    "@stylistic/selector-pseudo-class-case": "lower",
     "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-class-parentheses-space-inside": "never",
-    "selector-pseudo-element-case": "lower",
+    "@stylistic/selector-pseudo-class-parentheses-space-inside": "never",
+    "@stylistic/selector-pseudo-element-case": "lower",
     "selector-pseudo-element-colon-notation": "double",
     "selector-pseudo-element-no-unknown": [
       true,
@@ -136,13 +137,13 @@
     "selector-type-case": "lower",
     "selector-type-no-unknown": true,
     "string-no-newline": true,
-    "unit-case": "lower",
+    "@stylistic/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",
-    "value-list-max-empty-lines": 0
+    "@stylistic/value-list-comma-newline-after": "always-multi-line",
+    "@stylistic/value-list-comma-space-after": "always-single-line",
+    "@stylistic/value-list-comma-space-before": "never",
+    "@stylistic/value-list-max-empty-lines": 0
   },
   "overrides": [
     {

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
+  "[json][typescript][typescriptreact][javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

CONTRIBUTORS.md

@@ -93,6 +93,14 @@
 - [Connor Smith](https://github.com/ConnorS1110)
 - [iFraan](https://github.com/iFraan)
 - [Ali](https://github.com/bu3alwa)
+- [K. Kyle Puchkov](https://github.com/kepper104)
+- [ItsAllAboutTheCode](https://github.com/ItsAllAboutTheCode)
+- [Jxiced](https://github.com/Jxiced)
+- [Derek Huber](https://github.com/Derek4aty1)
+- [StableCrimson](https://github.com/StableCrimson)
+- [diegoeche](https://github.com/diegoeche)
+- [Free O'Toole](https://github.com/freeotoole)
+- [TheBosZ](https://github.com/thebosz)
 
 ## Emby Contributors
 

README.md

@@ -73,31 +73,39 @@ Jellyfin Web is the frontend used for most of the clients available for end user
 
 ## Directory Structure
 
+> [!NOTE]
+> We are in the process of refactoring to a [new structure](https://forum.jellyfin.org/t-proposed-update-to-the-structure-of-jellyfin-web) based on [Bulletproof React](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md) architecture guidelines.
+> Most new code should be organized under the appropriate app directory unless it is common/shared.
+
 ```
 .
 └── src
     ├── apps
-    │   ├── dashboard     # Admin dashboard app layout and routes
-    │   ├── experimental  # New experimental app layout and routes
-    │   └── stable        # Classic (stable) app layout and routes
-    ├── 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
-    ├── lib               # Reusable libraries
-    │   ├── globalize     # Custom localization library
-    │   ├── legacy        # Polyfills for legacy browsers
-    │   ├── navdrawer     # Navigation drawer library for classic layout
-    │   └── scroller      # Content scrolling library
-    ├── plugins           # Client plugins
-    ├── scripts           # Random assortment of visual components and utilities 🐉
-    ├── strings           # Translation files
-    ├── styles            # Common app Sass stylesheets
-    ├── themes            # CSS themes
-    ├── types             # Common TypeScript interfaces/types
-    └── utils             # Utility functions
+    │   ├── dashboard           # Admin dashboard app
+    │   ├── experimental        # New experimental app
+    │   ├── stable              # Classic (stable) app
+    │   └── wizard              # Startup wizard app
+    ├── assets                  # Static assets
+    ├── components              # Higher order visual components and React components
+    ├── constants               # Common constant values
+    ├── controllers             # Legacy page views and controllers 🧹 ❌
+    ├── elements                # Basic webcomponents and React equivalents 🧹
+    ├── hooks                   # Custom React hooks
+    ├── lib                     # Reusable libraries
+    │   ├── globalize           # Custom localization library
+    │   ├── jellyfin-apiclient  # Supporting code for the deprecated apiclient package
+    │   ├── legacy              # Polyfills for legacy browsers
+    │   ├── navdrawer           # Navigation drawer library for classic layout
+    │   └── scroller            # Content scrolling library
+    ├── plugins                 # Client plugins (features dynamically loaded at runtime)
+    ├── scripts                 # Random assortment of visual components and utilities 🐉 ❌
+    ├── strings                 # Translation files (only commit changes to en-us.json)
+    ├── styles                  # Common app Sass stylesheets
+    ├── themes                  # Sass and MUI themes
+    ├── types                   # Common TypeScript interfaces/types
+    └── utils                   # Utility functions
 ```
 
+- ❌ — Deprecated, do **not** create new files here
 - 🧹 — Needs cleanup
 - 🐉 — Serious mess (Here be dragons)

eslint.config.mjs

@@ -0,0 +1,417 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import comments from '@eslint-community/eslint-plugin-eslint-comments/configs';
+import compat from 'eslint-plugin-compat';
+import globals from 'globals';
+// @ts-expect-error Missing type definition
+import importPlugin from 'eslint-plugin-import';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import restrictedGlobals from 'confusing-browser-globals';
+import sonarjs from 'eslint-plugin-sonarjs';
+import stylistic from '@stylistic/eslint-plugin';
+// eslint-disable-next-line import/no-unresolved
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    // @ts-expect-error Harmless type mismatch in dependency
+    comments.recommended,
+    compat.configs['flat/recommended'],
+    importPlugin.flatConfigs.errors,
+    sonarjs.configs.recommended,
+
+    reactPlugin.configs.flat.recommended,
+    {
+        settings: {
+            react: {
+                version: 'detect'
+            }
+        }
+    },
+    jsxA11y.flatConfigs.recommended,
+
+    // Global ignores
+    {
+        ignores: [
+            'node_modules',
+            'coverage',
+            'dist',
+            '.idea',
+            '.vscode'
+        ]
+    },
+
+    // Global style rules
+    {
+        plugins: {
+            '@stylistic': stylistic
+        },
+        extends: [ importPlugin.flatConfigs.typescript ],
+        rules: {
+            'array-callback-return': ['error', { 'checkForEach': true }],
+            'curly': ['error', 'multi-line', 'consistent'],
+            'default-case-last': 'error',
+            'max-params': ['error', 7],
+            'new-cap': [
+                'error',
+                {
+                    'capIsNewExceptions': ['jQuery.Deferred'],
+                    'newIsCapExceptionPattern': '\\.default$'
+                }
+            ],
+            'no-duplicate-imports': 'error',
+            'no-empty-function': 'error',
+            'no-extend-native': 'error',
+            'no-lonely-if': 'error',
+            '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-throw-literal': 'error',
+            'no-undef-init': 'error',
+            'no-unneeded-ternary': 'error',
+            'no-unused-expressions': 'off',
+            '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
+            'no-unused-private-class-members': 'error',
+            '@typescript-eslint/no-unused-vars': 'error',
+            'no-useless-rename': 'error',
+            'no-useless-constructor': 'off',
+            '@typescript-eslint/no-useless-constructor': 'error',
+            'no-var': 'error',
+            'no-void': ['error', { 'allowAsStatement': true }],
+            'no-warning-comments': ['warn', { 'terms': ['hack', 'xxx'] }],
+            'one-var': ['error', 'never'],
+            'prefer-const': ['error', { 'destructuring': 'all' }],
+            'prefer-promise-reject-errors': ['warn', { 'allowEmptyReject': true }],
+            '@typescript-eslint/prefer-for-of': 'error',
+            'radix': 'error',
+            'yoda': 'error',
+
+            'sonarjs/fixme-tag': 'warn',
+            'sonarjs/todo-tag': 'off',
+            'sonarjs/deprecation': 'off',
+            'sonarjs/no-alphabetical-sort': 'warn',
+            'sonarjs/no-inverted-boolean-check': 'error',
+            'sonarjs/no-selector-parameter': 'off',
+            'sonarjs/pseudo-random': 'warn',
+            // TODO: Enable the following sonarjs rules and fix issues
+            'sonarjs/no-duplicate-string': 'off',
+            'sonarjs/no-nested-functions': 'warn',
+
+            // TODO: Replace with stylistic.configs.customize()
+            '@stylistic/block-spacing': 'error',
+            '@stylistic/brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
+            '@stylistic/comma-dangle': ['error', 'never'],
+            '@stylistic/comma-spacing': 'error',
+            '@stylistic/eol-last': 'error',
+            '@stylistic/indent': ['error', 4, { 'SwitchCase': 1 }],
+            '@stylistic/jsx-quotes': ['error', 'prefer-single'],
+            '@stylistic/keyword-spacing': 'error',
+            '@stylistic/max-statements-per-line': 'error',
+            '@stylistic/no-floating-decimal': 'error',
+            '@stylistic/no-mixed-spaces-and-tabs': 'error',
+            '@stylistic/no-multi-spaces': 'error',
+            '@stylistic/no-multiple-empty-lines': ['error', { 'max': 1 }],
+            '@stylistic/no-trailing-spaces': 'error',
+            '@stylistic/object-curly-spacing': ['error', 'always'],
+            '@stylistic/operator-linebreak': ['error', 'before', { overrides: { '?': 'after', ':': 'after', '=': 'after' } }],
+            '@stylistic/padded-blocks': ['error', 'never'],
+            '@stylistic/quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
+            '@stylistic/semi': 'error',
+            '@stylistic/space-before-blocks': 'error',
+            '@stylistic/space-infix-ops': 'error',
+
+            '@typescript-eslint/no-restricted-imports': [
+                'error',
+                {
+                    paths: [
+                        {
+                            name: '@jellyfin/sdk/lib/generated-client',
+                            message: 'Use direct file imports for tree-shaking',
+                            allowTypeImports: true
+                        },
+                        {
+                            name: '@jellyfin/sdk/lib/generated-client/api',
+                            message: 'Use direct file imports for tree-shaking',
+                            allowTypeImports: true
+                        },
+                        {
+                            name: '@jellyfin/sdk/lib/generated-client/models',
+                            message: 'Use direct file imports for tree-shaking',
+                            allowTypeImports: true
+                        },
+                        {
+                            name: '@mui/icons-material',
+                            message: 'Use direct file imports for tree-shaking',
+                            allowTypeImports: true
+                        },
+                        {
+                            name: '@mui/material',
+                            message: 'Use direct file imports for tree-shaking',
+                            allowTypeImports: true
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+
+    // Config files use node globals
+    {
+        ignores: [ 'src' ],
+        languageOptions: {
+            globals: {
+                ...globals.node
+            }
+        }
+    },
+
+    // Config files are commonjs by default
+    {
+        files: [ '**/*.{cjs,js}' ],
+        ignores: [ 'src' ],
+        languageOptions: {
+            sourceType: 'commonjs'
+        },
+        rules: {
+            '@typescript-eslint/no-require-imports': 'off'
+        }
+    },
+
+    // App files
+    {
+        files: [
+            'src/**/*.{js,jsx,ts,tsx}'
+        ],
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname
+            },
+            globals: {
+                ...globals.browser,
+                // Tizen globals
+                'tizen': false,
+                'webapis': false,
+                // WebOS globals
+                'webOS': false,
+                // Dependency globals
+                '$': false,
+                'jQuery': false,
+                // Jellyfin globals
+                'ApiClient': true,
+                'Events': true,
+                'chrome': true,
+                'Emby': false,
+                'Hls': true,
+                'LibraryMenu': true,
+                'Windows': false,
+                // Build time definitions
+                __COMMIT_SHA__: false,
+                __JF_BUILD_VERSION__: false,
+                __PACKAGE_JSON_NAME__: false,
+                __PACKAGE_JSON_VERSION__: false,
+                __USE_SYSTEM_FONTS__: false,
+                __WEBPACK_SERVE__: false
+            }
+        },
+        settings: {
+            'import/resolver': {
+                node: {
+                    extensions: [
+                        '.js',
+                        '.ts',
+                        '.jsx',
+                        '.tsx'
+                    ],
+                    moduleDirectory: [
+                        'node_modules',
+                        'src'
+                    ]
+                }
+            },
+            polyfills: [
+                'Promise',
+                // whatwg-fetch
+                'fetch',
+                // document-register-element
+                'document.registerElement',
+                // resize-observer-polyfill
+                'ResizeObserver',
+                // fast-text-encoding
+                'TextEncoder',
+                // intersection-observer
+                'IntersectionObserver',
+                // Core-js
+                'Object.assign',
+                'Object.is',
+                'Object.setPrototypeOf',
+                'Object.toString',
+                'Object.freeze',
+                'Object.seal',
+                'Object.preventExtensions',
+                'Object.isFrozen',
+                'Object.isSealed',
+                'Object.isExtensible',
+                'Object.getOwnPropertyDescriptor',
+                'Object.getPrototypeOf',
+                'Object.keys',
+                'Object.entries',
+                'Object.getOwnPropertyNames',
+                'Function.name',
+                'Function.hasInstance',
+                'Array.from',
+                'Array.arrayOf',
+                'Array.copyWithin',
+                'Array.fill',
+                'Array.find',
+                'Array.findIndex',
+                'Array.iterator',
+                'String.fromCodePoint',
+                'String.raw',
+                'String.iterator',
+                'String.codePointAt',
+                'String.endsWith',
+                'String.includes',
+                'String.repeat',
+                'String.startsWith',
+                'String.trim',
+                'String.anchor',
+                'String.big',
+                'String.blink',
+                'String.bold',
+                'String.fixed',
+                'String.fontcolor',
+                'String.fontsize',
+                'String.italics',
+                'String.link',
+                'String.small',
+                'String.strike',
+                'String.sub',
+                'String.sup',
+                'RegExp',
+                'Number',
+                'Math',
+                'Date',
+                'async',
+                'Symbol',
+                'Map',
+                'Set',
+                'WeakMap',
+                'WeakSet',
+                'ArrayBuffer',
+                'DataView',
+                'Int8Array',
+                'Uint8Array',
+                'Uint8ClampedArray',
+                'Int16Array',
+                'Uint16Array',
+                'Int32Array',
+                'Uint32Array',
+                'Float32Array',
+                'Float64Array',
+                'Reflect'
+            ]
+        },
+        rules: {
+            // TODO: Add typescript recommended typed rules
+            '@typescript-eslint/naming-convention': [
+                'error',
+                {
+                    selector: 'default',
+                    format: [ 'camelCase', 'PascalCase' ],
+                    leadingUnderscore: 'allow'
+                },
+                {
+                    selector: 'variable',
+                    format: [ 'camelCase', 'PascalCase', 'UPPER_CASE' ],
+                    leadingUnderscore: 'allowSingleOrDouble',
+                    trailingUnderscore: 'allowSingleOrDouble'
+                },
+                {
+                    selector: 'typeLike',
+                    format: [ 'PascalCase' ]
+                },
+                {
+                    selector: 'enumMember',
+                    format: [ 'PascalCase', 'UPPER_CASE' ]
+                },
+                {
+                    selector: [ 'objectLiteralProperty', 'typeProperty' ],
+                    format: [ 'camelCase', 'PascalCase' ],
+                    leadingUnderscore: 'allowSingleOrDouble',
+                    trailingUnderscore: 'allowSingleOrDouble'
+                },
+                // Ignore numbers, locale strings (en-us), aria/data attributes and CSS selectors
+                {
+                    selector: [ 'objectLiteralProperty', 'typeProperty' ],
+                    format: null,
+                    filter: {
+                        regex: '[ &\\-]|^([0-9]+)$',
+                        match: true
+                    }
+                }
+            ],
+            '@typescript-eslint/no-deprecated': 'warn',
+            '@typescript-eslint/no-floating-promises': 'error',
+            '@typescript-eslint/prefer-string-starts-ends-with': 'error'
+        }
+    },
+
+    // React files
+    {
+        files: [ 'src/**/*.{jsx,tsx}' ],
+        plugins: {
+            'react-hooks': reactHooks
+        },
+        rules: {
+            'react/jsx-filename-extension': ['error', { 'extensions': ['.jsx', '.tsx'] }],
+            'react/jsx-no-bind': 'error',
+            'react/jsx-no-useless-fragment': 'error',
+            'react/no-array-index-key': 'error',
+            'react-hooks/rules-of-hooks': 'error',
+            'react-hooks/exhaustive-deps': 'warn'
+        }
+    },
+
+    // Service worker
+    {
+        files: [ 'src/serviceworker.js' ],
+        languageOptions: {
+            globals: {
+                ...globals.serviceworker
+            }
+        }
+    },
+
+    // Legacy JS (less strict)
+    {
+        files: [ 'src/**/*.{js,jsx}' ],
+        rules: {
+            '@typescript-eslint/no-floating-promises': 'off',
+            '@typescript-eslint/no-this-alias': 'off',
+
+            'sonarjs/public-static-readonly': 'off',
+
+            // TODO: Enable the following rules and fix issues
+            'sonarjs/cognitive-complexity': 'off',
+            'sonarjs/constructor-for-side-effects': 'off',
+            'sonarjs/function-return-type': 'off',
+            'sonarjs/no-async-constructor': 'off',
+            'sonarjs/no-duplicate-string': 'off',
+            'sonarjs/no-ignored-exceptions': 'off',
+            'sonarjs/no-invariant-returns': 'warn',
+            'sonarjs/no-nested-functions': 'off',
+            'sonarjs/void-use': 'off'
+        }
+    }
+);

flake.lock

@@ -0,0 +1,60 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1739874174,
+        "narHash": "sha256-XGxSVtojlwjYRYGvGXex0Cw+/363EVJlbY9TPX9bARk=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "d2ab2691c798f6b633be91d74b1626980ddaff30",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,34 @@
+{
+  description = "jellyfin-web nix flake";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = {
+    self,
+    nixpkgs,
+    flake-utils,
+  }:
+    flake-utils.lib.eachDefaultSystem (
+      system: let
+        pkgs = import nixpkgs {
+          inherit system;
+        };
+      in {
+        devShell = with pkgs;
+          mkShell rec {
+            buildInputs = [
+              nodejs_20
+            ];
+
+            shellHook = ''
+              # Also see: https://github.com/sass/embedded-host-node/issues/334
+              echo "Removing sass-embedded from node-modules as its broken on NixOS."
+              rm -rf node_modules/sass-embedded*
+            '';
+          };
+      }
+    );
+}

package.json

@@ -5,102 +5,108 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "7.25.8",
-    "@babel/plugin-transform-modules-umd": "7.25.7",
-    "@babel/preset-env": "7.25.8",
-    "@babel/preset-react": "7.25.7",
-    "@eslint-community/eslint-plugin-eslint-comments": "4.4.0",
-    "@stylistic/eslint-plugin": "2.9.0",
+    "@babel/core": "7.27.4",
+    "@babel/plugin-transform-modules-umd": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@eslint-community/eslint-plugin-eslint-comments": "4.5.0",
+    "@eslint/js": "9.30.1",
+    "@stylistic/eslint-plugin": "4.4.1",
+    "@stylistic/stylelint-plugin": "3.1.3",
     "@types/dompurify": "3.0.5",
     "@types/escape-html": "1.0.4",
     "@types/loadable__component": "5.13.9",
     "@types/lodash-es": "4.17.12",
     "@types/markdown-it": "14.1.2",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
     "@types/react-lazy-load-image-component": "1.6.4",
     "@types/sortablejs": "1.15.8",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/parser": "8.35.1",
     "@uupaa/dynamic-import-polyfill": "1.0.2",
-    "@vitest/coverage-v8": "2.1.8",
-    "autoprefixer": "10.4.20",
-    "babel-loader": "9.2.1",
+    "@vitest/coverage-v8": "3.2.4",
+    "autoprefixer": "10.4.21",
+    "babel-loader": "10.0.0",
     "clean-webpack-plugin": "4.0.0",
     "confusing-browser-globals": "1.0.11",
-    "copy-webpack-plugin": "12.0.2",
+    "copy-webpack-plugin": "13.0.0",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "cssnano": "7.0.6",
-    "es-check": "7.2.1",
-    "eslint": "8.57.1",
-    "eslint-plugin-compat": "4.2.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-react": "7.37.1",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-sonarjs": "0.25.1",
-    "expose-loader": "5.0.0",
-    "fork-ts-checker-webpack-plugin": "9.0.2",
+    "cssnano": "7.0.7",
+    "es-check": "9.1.4",
+    "eslint": "9.30.1",
+    "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-sonarjs": "3.0.4",
+    "expose-loader": "5.0.1",
+    "fast-glob": "3.3.3",
+    "fork-ts-checker-webpack-plugin": "9.1.0",
+    "globals": "16.2.0",
     "html-loader": "5.1.0",
-    "html-webpack-plugin": "5.6.0",
-    "jsdom": "25.0.1",
-    "mini-css-extract-plugin": "2.9.1",
-    "postcss": "8.4.47",
+    "html-webpack-plugin": "5.6.3",
+    "jsdom": "26.1.0",
+    "mini-css-extract-plugin": "2.9.2",
+    "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
-    "postcss-preset-env": "10.0.7",
+    "postcss-preset-env": "10.2.3",
     "postcss-scss": "4.0.9",
-    "sass": "1.79.5",
-    "sass-loader": "16.0.2",
+    "sass": "1.89.2",
+    "sass-loader": "16.0.5",
     "source-map-loader": "5.0.0",
     "speed-measure-webpack-plugin": "1.5.0",
     "style-loader": "4.0.0",
-    "stylelint": "15.11.0",
+    "stylelint": "16.21.0",
     "stylelint-config-rational-order": "0.1.2",
-    "stylelint-no-browser-hacks": "1.3.0",
-    "stylelint-order": "6.0.4",
-    "stylelint-scss": "5.3.2",
-    "ts-loader": "9.5.1",
-    "typescript": "5.6.3",
-    "vitest": "2.1.8",
-    "webpack": "5.95.0",
+    "stylelint-no-browser-hacks": "2.0.0",
+    "stylelint-order": "7.0.0",
+    "stylelint-scss": "6.12.1",
+    "ts-loader": "9.5.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.35.1",
+    "vitest": "3.2.4",
+    "webpack": "5.99.9",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.2",
     "webpack-merge": "6.0.1",
     "worker-loader": "3.0.8"
   },
   "dependencies": {
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
-    "@fontsource/noto-sans": "5.1.0",
-    "@fontsource/noto-sans-hk": "5.1.0",
-    "@fontsource/noto-sans-jp": "5.1.0",
-    "@fontsource/noto-sans-kr": "5.1.0",
-    "@fontsource/noto-sans-sc": "5.1.0",
-    "@fontsource/noto-sans-tc": "5.1.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@fontsource/noto-sans": "5.2.7",
+    "@fontsource/noto-sans-hk": "5.2.6",
+    "@fontsource/noto-sans-jp": "5.2.6",
+    "@fontsource/noto-sans-kr": "5.2.6",
+    "@fontsource/noto-sans-sc": "5.2.6",
+    "@fontsource/noto-sans-tc": "5.2.6",
     "@jellyfin/libass-wasm": "4.2.3",
-    "@jellyfin/sdk": "0.0.0-unstable.202501020501",
-    "@mui/icons-material": "5.16.7",
-    "@mui/material": "5.16.7",
-    "@mui/x-date-pickers": "7.20.0",
+    "@jellyfin/sdk": "0.0.0-unstable.202508300501",
+    "@jellyfin/ux-web": "1.0.0",
+    "@mui/icons-material": "6.4.12",
+    "@mui/material": "6.4.12",
+    "@mui/x-date-pickers": "7.29.4",
     "@react-hook/resize-observer": "2.0.2",
-    "@tanstack/react-query": "5.59.13",
-    "@tanstack/react-query-devtools": "5.59.13",
-    "abortcontroller-polyfill": "1.7.5",
+    "@tanstack/react-query": "5.80.10",
+    "@tanstack/react-query-devtools": "5.80.10",
+    "abortcontroller-polyfill": "1.7.8",
     "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.5.1",
-    "core-js": "3.38.1",
+    "core-js": "3.43.0",
     "date-fns": "2.30.0",
-    "dompurify": "2.5.7",
+    "dompurify": "2.5.8",
+    "element-closest-polyfill": "1.0.7",
     "epubjs": "0.3.93",
     "escape-html": "1.0.3",
     "fast-text-encoding": "1.0.6",
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
-    "hls.js": "1.5.18",
+    "hls.js": "1.6.9",
     "intersection-observer": "0.12.2",
     "jellyfin-apiclient": "1.11.0",
     "jquery": "3.7.1",
@@ -110,24 +116,25 @@
     "lodash-es": "4.17.21",
     "markdown-it": "14.1.0",
     "material-design-icons-iconfont": "6.7.0",
-    "material-react-table": "2.13.3",
+    "material-react-table": "3.2.1",
     "native-promise-only": "0.8.1",
     "pdfjs-dist": "3.11.174",
+    "proxy-polyfill": "0.3.2",
     "react": "18.3.1",
     "react-blurhash": "0.3.0",
     "react-dom": "18.3.1",
-    "react-lazy-load-image-component": "1.6.2",
-    "react-router-dom": "6.27.0",
+    "react-lazy-load-image-component": "1.6.3",
+    "react-router-dom": "6.30.1",
     "resize-observer-polyfill": "1.5.1",
     "screenfull": "6.0.2",
-    "sortablejs": "1.15.3",
-    "swiper": "11.1.14",
-    "usehooks-ts": "3.1.0",
+    "sortablejs": "1.15.6",
+    "swiper": "11.2.8",
+    "usehooks-ts": "3.1.1",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.20"
   },
   "optionalDependencies": {
-    "sass-embedded": "1.79.5"
+    "sass-embedded": "1.89.2"
   },
   "browserslist": [
     "last 2 Firefox versions",

src/RootAppRouter.tsx

@@ -1,4 +1,4 @@
-
+import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
 import {
     RouterProvider,
@@ -10,11 +10,12 @@ import {
 import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
 import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
+import { WIZARD_APP_ROUTES } from 'apps/wizard/routes/routes';
 import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import UserThemeProvider from 'themes/UserThemeProvider';
+import appTheme from 'themes/themes';
 
 const layoutMode = localStorage.getItem('layout');
 const isExperimentalLayout = layoutMode === 'experimental';
@@ -25,6 +26,7 @@ const router = createHashRouter([
         children: [
             ...(isExperimentalLayout ? EXPERIMENTAL_APP_ROUTES : STABLE_APP_ROUTES),
             ...DASHBOARD_APP_ROUTES,
+            ...WIZARD_APP_ROUTES,
             {
                 path: '!/*',
                 Component: BangRedirect
@@ -49,11 +51,16 @@ function RootAppLayout() {
         .some(path => location.pathname.startsWith(`/${path}`));
 
     return (
-        <UserThemeProvider>
+        <ThemeProvider
+            theme={appTheme}
+            defaultMode='dark'
+            // Disable mui's default saving to local storage
+            storageManager={null}
+        >
             <Backdrop />
             <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
 
             <Outlet />
-        </UserThemeProvider>
+        </ThemeProvider>
     );
 }

src/apiclient.d.ts

@@ -1,4 +1,3 @@
-// TODO: Move to jellyfin-apiclient
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module 'jellyfin-apiclient' {
     import type {
@@ -68,7 +67,7 @@ declare module 'jellyfin-apiclient' {
         UtcTimeResponse,
         VirtualFolderInfo
     } from '@jellyfin/sdk/lib/generated-client';
-    import { ConnectionState } from './utils/jellyfin-apiclient/ConnectionState';
+    import type { ConnectionState } from 'lib/jellyfin-apiclient';
 
     class ApiClient {
         constructor(serverAddress: string, appName: string, appVersion: string, deviceName: string, deviceId: string);
@@ -337,6 +336,7 @@ declare module 'jellyfin-apiclient' {
         handleMessageReceived(msg: any): void;
         logout(): Promise<void>;
         minServerVersion(val?: string): string;
+        updateSavedServerId(server: any): Promise<void>;
         user(apiClient: ApiClient): Promise<any>;
     }
 

src/apps/dashboard/AppLayout.tsx

@@ -9,8 +9,11 @@ import { Outlet, useLocation } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
 import AppToolbar from 'components/toolbar/AppToolbar';
+import ServerButton from 'components/toolbar/ServerButton';
 import ElevationScroll from 'components/ElevationScroll';
 import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
+import { appRouter } from 'components/router/appRouter';
+import ThemeCss from 'components/ThemeCss';
 import { useApi } from 'hooks/useApi';
 import { useLocale } from 'hooks/useLocale';
 
@@ -21,8 +24,6 @@ import { DASHBOARD_APP_PATHS } from './routes/routes';
 
 import './AppOverrides.scss';
 
-const DRAWERLESS_PATHS = [ DASHBOARD_APP_PATHS.MetadataManager ];
-
 export const Component: FC = () => {
     const [ isDrawerActive, setIsDrawerActive ] = useState(false);
     const location = useLocation();
@@ -30,8 +31,8 @@ export const Component: FC = () => {
     const { dateFnsLocale } = useLocale();
 
     const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
-    const isDrawerAvailable = Boolean(user)
-        && !DRAWERLESS_PATHS.some(path => location.pathname.startsWith(`/${path}`));
+    const isMetadataManager = location.pathname.startsWith(`/${DASHBOARD_APP_PATHS.MetadataManager}`);
+    const isDrawerAvailable = Boolean(user) && !isMetadataManager;
     const isDrawerOpen = isDrawerActive && isDrawerAvailable;
 
     const onToggleDrawer = useCallback(() => {
@@ -66,6 +67,7 @@ export const Component: FC = () => {
                             }}
                         >
                             <AppToolbar
+                                isBackButtonAvailable={appRouter.canGoBack()}
                                 isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
                                 isDrawerOpen={isDrawerOpen}
                                 onDrawerButtonClick={onToggleDrawer}
@@ -73,6 +75,10 @@ export const Component: FC = () => {
                                     <HelpButton />
                                 }
                             >
+                                {isMetadataManager && (
+                                    <ServerButton />
+                                )}
+
                                 <AppTabs isDrawerOpen={isDrawerOpen} />
                             </AppToolbar>
                         </AppBar>
@@ -101,6 +107,7 @@ export const Component: FC = () => {
                     </AppBody>
                 </Box>
             </Box>
+            <ThemeCss dashboard />
         </LocalizationProvider>
     );
 };

src/apps/dashboard/components/BaseCard.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import CardActionArea from '@mui/material/CardActionArea';
+import Stack from '@mui/material/Stack';
+import { Link, To } from 'react-router-dom';
+
+interface BaseCardProps {
+    title?: string;
+    secondaryTitle?: string;
+    text?: string;
+    image?: string | null;
+    icon?: React.ReactNode;
+    to?: To;
+    onClick?: () => void;
+    action?: boolean;
+    actionRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    onActionClick?: () => void;
+};
+
+const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, action, actionRef, onActionClick }: BaseCardProps) => {
+    return (
+        <Card
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: 240
+            }}
+        >
+            <CardActionArea
+                {...(to && {
+                    component: Link,
+                    to: to
+                })}
+                onClick={onClick}
+                sx={{
+                    display: 'flex',
+                    flexGrow: 1,
+                    alignItems: 'stretch'
+                }}
+            >
+                {image ? (
+                    <CardMedia
+                        sx={{ flexGrow: 1 }}
+                        image={image}
+                        title={title}
+                    />
+                ) : (
+                    <Box className={getDefaultBackgroundClass(title)} sx={{
+                        flexGrow: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}>
+                        {icon}
+                    </Box>
+                )}
+            </CardActionArea>
+            <CardHeader
+                title={
+                    <Stack direction='row' spacing={1} alignItems='center'>
+                        <Typography sx={{
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis'
+                        }}>
+                            {title}
+                        </Typography>
+                        {secondaryTitle && (
+                            <Typography variant='body2' color='text.secondary'>{secondaryTitle}</Typography>
+                        )}
+                    </Stack>
+                }
+                subheader={text}
+                action={
+                    action ? (
+                        <IconButton ref={actionRef} onClick={onActionClick}>
+                            <MoreVertIcon />
+                        </IconButton>
+                    ) : null
+                }
+            />
+        </Card>
+    );
+};
+
+export default BaseCard;

src/apps/dashboard/components/SearchInput.tsx

@@ -0,0 +1,70 @@
+import Search from '@mui/icons-material/Search';
+import InputBase, { type InputBaseProps } from '@mui/material/InputBase';
+import { alpha, styled } from '@mui/material/styles';
+import React, { type FC } from 'react';
+
+const SearchContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    '&:hover': {
+        backgroundColor: alpha(theme.palette.common.white, 0.25)
+    },
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        width: 'auto'
+    }
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    flexGrow: 1,
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(1, 1, 1, 0),
+        // vertical padding + font size from searchIcon
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('md')]: {
+            width: '20ch'
+        }
+    }
+}));
+
+interface SearchInputProps extends InputBaseProps {
+    label?: string
+}
+
+const SearchInput: FC<SearchInputProps> = ({
+    label,
+    ...props
+}) => {
+    return (
+        <SearchContainer>
+            <SearchIconWrapper>
+                <Search />
+            </SearchIconWrapper>
+            <StyledInputBase
+                placeholder={label}
+                inputProps={{
+                    'aria-label': label,
+                    ...props.inputProps
+                }}
+                {...props}
+            />
+        </SearchContainer>
+    );
+};
+
+export default SearchInput;

src/apps/dashboard/components/UserAvatarButton.tsx

@@ -1,5 +1,6 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
-import IconButton from '@mui/material/IconButton/IconButton';
+import type { SxProps, Theme } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
 import React, { type FC } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -7,14 +8,21 @@ import UserAvatar from 'components/UserAvatar';
 
 interface UserAvatarButtonProps {
     user?: UserDto
+    sx?: SxProps<Theme>
 }
 
-const UserAvatarButton: FC<UserAvatarButtonProps> = ({ user }) => (
+const UserAvatarButton: FC<UserAvatarButtonProps> = ({
+    user,
+    sx
+}) => (
     user?.Id ? (
         <IconButton
             size='large'
             color='inherit'
-            sx={{ padding: 0 }}
+            sx={{
+                padding: 0,
+                ...sx
+            }}
             title={user.Name || undefined}
             component={Link}
             to={`/dashboard/users/profile?userId=${user.Id}`}

src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx

@@ -1,4 +1,5 @@
 import Article from '@mui/icons-material/Article';
+import Backup from '@mui/icons-material/Backup';
 import Lan from '@mui/icons-material/Lan';
 import Schedule from '@mui/icons-material/Schedule';
 import VpnKey from '@mui/icons-material/VpnKey';
@@ -38,6 +39,14 @@ const AdvancedDrawerSection = () => {
                     <ListItemText primary={globalize.translate('HeaderApiKeys')} />
                 </ListItemLink>
             </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/backups'>
+                    <ListItemIcon>
+                        <Backup />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderBackups')} />
+                </ListItemLink>
+            </ListItem>
             <ListItem disablePadding>
                 <ListItemLink to='/dashboard/logs'>
                     <ListItemIcon>

src/apps/dashboard/components/drawer/sections/DevicesDrawerSection.tsx

@@ -1,4 +1,5 @@
-import { Devices, Analytics } from '@mui/icons-material';
+import Analytics from '@mui/icons-material/Analytics';
+import Devices from '@mui/icons-material/Devices';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';

src/apps/dashboard/components/drawer/sections/LiveTvDrawerSection.tsx

@@ -1,4 +1,5 @@
-import { Dvr, LiveTv } from '@mui/icons-material';
+import Dvr from '@mui/icons-material/Dvr';
+import LiveTv from '@mui/icons-material/LiveTv';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -28,7 +29,7 @@ const LiveTvDrawerSection = () => {
                 </ListItemLink>
             </ListItem>
             <ListItem disablePadding>
-                <ListItemLink to='/dashboard/recordings'>
+                <ListItemLink to='/dashboard/livetv/recordings'>
                     <ListItemIcon>
                         <Dvr />
                     </ListItemIcon>

src/apps/dashboard/components/drawer/sections/PluginDrawerSection.tsx

@@ -1,6 +1,5 @@
 import Extension from '@mui/icons-material/Extension';
 import Folder from '@mui/icons-material/Folder';
-import Public from '@mui/icons-material/Public';
 import List from '@mui/material/List';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -33,23 +32,16 @@ const PluginDrawerSection = () => {
         >
             <ListItemLink
                 to='/dashboard/plugins'
-                includePaths={[ '/configurationpage' ]}
+                includePaths={[
+                    '/configurationpage',
+                    '/dashboard/plugins/repositories'
+                ]}
                 excludePaths={pagesInfo?.map(p => `/${Dashboard.getPluginUrl(p.Name)}`)}
             >
                 <ListItemIcon>
                     <Extension />
                 </ListItemIcon>
-                <ListItemText primary={globalize.translate('TabMyPlugins')} />
-            </ListItemLink>
-
-            <ListItemLink
-                to='/dashboard/plugins/catalog'
-                includePaths={[ '/dashboard/plugins/repositories' ]}
-            >
-                <ListItemIcon>
-                    <Public />
-                </ListItemIcon>
-                <ListItemText primary={globalize.translate('TabCatalog')} />
+                <ListItemText primary={globalize.translate('TabPlugins')} />
             </ListItemLink>
 
             {pagesInfo?.map(pageInfo => (

src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx

@@ -1,5 +1,11 @@
-import { Dashboard, ExpandLess, ExpandMore, LibraryAdd, People, PlayCircle, Settings } from '@mui/icons-material';
+import Dashboard from '@mui/icons-material/Dashboard';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import LibraryAdd from '@mui/icons-material/LibraryAdd';
 import Palette from '@mui/icons-material/Palette';
+import People from '@mui/icons-material/People';
+import PlayCircle from '@mui/icons-material/PlayCircle';
+import Settings from '@mui/icons-material/Settings';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -7,7 +13,7 @@ import ListItemButton from '@mui/material/ListItemButton/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
-import React, { useCallback, useState } from 'react';
+import React, { type MouseEvent, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ListItemLink from 'components/ListItemLink';
@@ -33,11 +39,15 @@ const ServerDrawerSection = () => {
     const [ isLibrarySectionOpen, setIsLibrarySectionOpen ] = useState(LIBRARY_PATHS.includes(location.pathname));
     const [ isPlaybackSectionOpen, setIsPlaybackSectionOpen ] = useState(PLAYBACK_PATHS.includes(location.pathname));
 
-    const onLibrarySectionClick = useCallback(() => {
+    const onLibrarySectionClick = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
         setIsLibrarySectionOpen(isOpen => !isOpen);
     }, []);
 
-    const onPlaybackSectionClick = useCallback(() => {
+    const onPlaybackSectionClick = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
         setIsPlaybackSectionOpen(isOpen => !isOpen);
     }, []);
 

src/apps/dashboard/components/table/DateTimeCell.tsx

@@ -0,0 +1,17 @@
+import format from 'date-fns/format';
+import type { MRT_Cell, MRT_RowData } from 'material-react-table';
+import { FC } from 'react';
+
+import { useLocale } from 'hooks/useLocale';
+
+interface CellProps {
+    cell: MRT_Cell<MRT_RowData>
+}
+
+const DateTimeCell: FC<CellProps> = ({ cell }) => {
+    const { dateFnsLocale } = useLocale();
+
+    return format(cell.getValue<Date>(), 'Pp', { locale: dateFnsLocale });
+};
+
+export default DateTimeCell;

src/apps/dashboard/components/table/TablePage.tsx

@@ -0,0 +1,72 @@
+import Box from '@mui/material/Box/Box';
+import Stack from '@mui/material/Stack/Stack';
+import Typography from '@mui/material/Typography/Typography';
+import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
+import React from 'react';
+
+import Page, { type PageProps } from 'components/Page';
+
+interface TablePageProps<T extends MRT_RowData> extends PageProps {
+    title: string
+    subtitle?: string
+    table: MRT_TableInstance<T>
+}
+
+export const DEFAULT_TABLE_OPTIONS = {
+    // Enable custom features
+    enableColumnPinning: true,
+    enableColumnResizing: true,
+
+    // Sticky header/footer
+    enableStickyFooter: true,
+    enableStickyHeader: true,
+    muiTableContainerProps: {
+        sx: {
+            maxHeight: 'calc(100% - 7rem)' // 2 x 3.5rem for header and footer
+        }
+    }
+};
+
+const TablePage = <T extends MRT_RowData>({
+    title,
+    subtitle,
+    table,
+    children,
+    ...pageProps
+}: TablePageProps<T>) => {
+    return (
+        <Page
+            title={title}
+            {...pageProps}
+        >
+            <Box
+                className='content-primary'
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%'
+                }}
+            >
+                <Stack
+                    spacing={2}
+                    sx={{
+                        marginBottom: 1
+                    }}
+                >
+                    <Typography variant='h1'>
+                        {title}
+                    </Typography>
+                    {subtitle && (
+                        <Typography>
+                            {subtitle}
+                        </Typography>
+                    )}
+                </Stack>
+                <MaterialReactTable table={table} />
+            </Box>
+            {children}
+        </Page>
+    );
+};
+
+export default TablePage;

src/apps/dashboard/components/toolbar/HelpButton.tsx

@@ -1,5 +1,5 @@
 import HelpOutline from '@mui/icons-material/HelpOutline';
-import IconButton from '@mui/material/IconButton/IconButton';
+import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip/Tooltip';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';

src/apps/dashboard/components/widgets/ActivityLogWidget.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import List from '@mui/material/List';
+import ActivityListItem from 'apps/dashboard/features/activity/components/ActivityListItem';
+import { useLogEntries } from 'apps/dashboard/features/activity/api/useLogEntries';
+import subSeconds from 'date-fns/subSeconds';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+const ActivityLogWidget = () => {
+    const dayBefore = useMemo(() => (
+        subSeconds(new Date(), 24 * 60 * 60).toISOString()
+    ), []);
+
+    const { data: logs, isPending } = useLogEntries({
+        startIndex: 0,
+        limit: 7,
+        minDate: dayBefore,
+        hasUserId: true
+    });
+
+    return (
+        <Widget
+            title={globalize.translate('HeaderActivity')}
+            href='/dashboard/activity?useractivity=true'
+        >
+            {isPending ? (
+                <Stack spacing={2}>
+                    <Skeleton variant='rounded' height={60} />
+                    <Skeleton variant='rounded' height={60} />
+                    <Skeleton variant='rounded' height={60} />
+                    <Skeleton variant='rounded' height={60} />
+                </Stack>
+            ) : (
+                <List sx={{ bgcolor: 'background.paper' }}>
+                    {logs?.Items?.map(entry => (
+                        <ActivityListItem
+                            key={entry.Id}
+                            item={entry}
+                            displayShortOverview={true}
+                        />
+                    ))}
+                </List>
+            )}
+        </Widget>
+    );
+};
+
+export default ActivityLogWidget;

src/apps/dashboard/components/widgets/AlertsLogWidget.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import List from '@mui/material/List';
+import ActivityListItem from 'apps/dashboard/features/activity/components/ActivityListItem';
+import subSeconds from 'date-fns/subSeconds';
+import { useLogEntries } from 'apps/dashboard/features/activity/api/useLogEntries';
+
+const AlertsLogWidget = () => {
+    const weekBefore = useMemo(() => (
+        subSeconds(new Date(), 7 * 24 * 60 * 60).toISOString()
+    ), []);
+
+    const { data: alerts, isPending } = useLogEntries({
+        startIndex: 0,
+        limit: 4,
+        minDate: weekBefore,
+        hasUserId: false
+    });
+
+    if (isPending || alerts?.Items?.length === 0) return null;
+
+    return (
+        <Widget
+            title={globalize.translate('Alerts')}
+            href='/dashboard/activity?useractivity=false'
+        >
+            <List sx={{ bgcolor: 'background.paper' }}>
+                {alerts?.Items?.map(entry => (
+                    <ActivityListItem
+                        key={entry.Id}
+                        item={entry}
+                        displayShortOverview={false}
+                    />
+                ))}
+            </List>
+        </Widget>
+    );
+};
+
+export default AlertsLogWidget;

src/apps/dashboard/components/widgets/DevicesWidget.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import DeviceCard from 'apps/dashboard/features/devices/components/DeviceCard';
+import Stack from '@mui/material/Stack';
+import useLiveSessions from 'apps/dashboard/features/sessions/hooks/useLiveSessions';
+
+const DevicesWidget = () => {
+    const { data: devices } = useLiveSessions();
+
+    return (
+        <Widget
+            title={globalize.translate('HeaderDevices')}
+            href='/dashboard/devices'
+        >
+            <Stack direction='row' flexWrap='wrap' gap={2}>
+                {devices?.map(device => (
+                    <DeviceCard
+                        key={device.Id}
+                        device={device}
+                    />
+                ))}
+            </Stack>
+        </Widget>
+    );
+};
+
+export default DevicesWidget;

src/apps/dashboard/components/widgets/ItemCountsWidget.tsx

@@ -0,0 +1,98 @@
+import type { ItemCounts } from '@jellyfin/sdk/lib/generated-client/models/item-counts';
+import Book from '@mui/icons-material/Book';
+import Movie from '@mui/icons-material/Movie';
+import MusicNote from '@mui/icons-material/MusicNote';
+import MusicVideo from '@mui/icons-material/MusicVideo';
+import Tv from '@mui/icons-material/Tv';
+import VideoLibrary from '@mui/icons-material/VideoLibrary';
+import Grid from '@mui/material/Grid2';
+import SvgIcon from '@mui/material/SvgIcon';
+import React, { useMemo } from 'react';
+
+import { useItemCounts } from 'apps/dashboard/features/metrics/api/useItemCounts';
+import MetricCard, { type MetricCardProps } from 'apps/dashboard/features/metrics/components/MetricCard';
+import globalize from 'lib/globalize';
+
+interface MetricDefinition {
+    key: keyof ItemCounts
+    i18n: string
+}
+
+interface CardDefinition {
+    Icon: typeof SvgIcon
+    metrics: MetricDefinition[]
+}
+
+const CARD_DEFINITIONS: CardDefinition[] = [
+    {
+        Icon: Movie,
+        metrics: [{ key: 'MovieCount', i18n: 'Movies' }]
+    }, {
+        Icon: Tv,
+        metrics: [
+            { key: 'SeriesCount', i18n: 'Series' },
+            { key: 'EpisodeCount', i18n: 'Episodes' }
+        ]
+    }, {
+        Icon: MusicNote,
+        metrics: [
+            { key: 'AlbumCount', i18n: 'Albums' },
+            { key: 'SongCount', i18n: 'Songs' }
+        ]
+    }, {
+        Icon: MusicVideo,
+        metrics: [{ key: 'MusicVideoCount', i18n: 'MusicVideos' }]
+    }, {
+        Icon: Book,
+        metrics: [{ key: 'BookCount', i18n: 'Books' }]
+    }, {
+        Icon: VideoLibrary,
+        metrics: [{ key: 'BoxSetCount', i18n: 'Collections' }]
+    }
+];
+
+const ItemCountsWidget = () => {
+    const {
+        data: counts,
+        isPending
+    } = useItemCounts();
+
+    const cards: MetricCardProps[] = useMemo(() => {
+        return CARD_DEFINITIONS
+            .filter(def => (
+                // Include all cards while the request is pending
+                isPending
+                // Check if the metrics are present in counts
+                || def.metrics.some(({ key }) => counts?.[key])
+            ))
+            .map(({ Icon, metrics }) => ({
+                Icon,
+                metrics: metrics.map(({ i18n, key }) => ({
+                    label: globalize.translate(i18n),
+                    value: counts?.[key]
+                }))
+            }));
+    }, [ counts, isPending ]);
+
+    return (
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                alignItems: 'stretch',
+                marginTop: 2
+            }}
+        >
+            {cards.map(card => (
+                <Grid
+                    key={card.metrics.map(metric => metric.label).join('-')}
+                    size={{ xs: 12, sm: 6, lg: 4 }}
+                >
+                    <MetricCard {...card} />
+                </Grid>
+            ))}
+        </Grid>
+    );
+};
+
+export default ItemCountsWidget;

src/apps/dashboard/components/widgets/RunningTasksWidget.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import type { TaskInfo } from '@jellyfin/sdk/lib/generated-client/models/task-info';
+import Paper from '@mui/material/Paper';
+import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
+import Typography from '@mui/material/Typography';
+import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+type RunningTasksWidgetProps = {
+    tasks?: TaskInfo[];
+};
+
+const RunningTasksWidget = ({ tasks }: RunningTasksWidgetProps) => {
+    const runningTasks = useMemo(() => {
+        return tasks?.filter(v => v.State == TaskState.Running) || [];
+    }, [ tasks ]);
+
+    if (runningTasks.length == 0) return null;
+
+    return (
+        <Widget
+            title={globalize.translate('HeaderRunningTasks')}
+            href='/dashboard/tasks'
+        >
+            <Paper sx={{ padding: 2 }}>
+                <Stack spacing={2} maxWidth={'330px'}>
+                    {runningTasks.map((task => (
+                        <Box key={task.Id}>
+                            <Typography>{task.Name}</Typography>
+                            <TaskProgress task={task} />
+                        </Box>
+                    )))}
+                </Stack>
+            </Paper>
+        </Widget>
+    );
+};
+
+export default RunningTasksWidget;

src/apps/dashboard/components/widgets/ServerInfoWidget.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Skeleton from '@mui/material/Skeleton';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import { useSystemInfo } from 'hooks/useSystemInfo';
+
+type ServerInfoWidgetProps = {
+    onScanLibrariesClick?: () => void;
+    onRestartClick?: () => void;
+    onShutdownClick?: () => void;
+};
+
+const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClick }: ServerInfoWidgetProps) => {
+    const { data: systemInfo, isPending } = useSystemInfo();
+
+    return (
+        <Widget
+            title={globalize.translate('TabServer')}
+            href='/dashboard/settings'
+        >
+            <Stack spacing={2}>
+                <Paper sx={{
+                    padding: 2
+                }}>
+                    <Stack direction='row'>
+                        <Stack flexGrow={1} spacing={1}>
+                            <Typography fontWeight='bold'>{globalize.translate('LabelServerName')}</Typography>
+                            <Typography fontWeight='bold'>{globalize.translate('LabelServerVersion')}</Typography>
+                            <Typography fontWeight='bold'>{globalize.translate('LabelWebVersion')}</Typography>
+                            <Typography fontWeight='bold'>{globalize.translate('LabelBuildVersion')}</Typography>
+                        </Stack>
+                        <Stack flexGrow={5} spacing={1}>
+                            {isPending ? (
+                                <>
+                                    <Skeleton />
+                                    <Skeleton />
+                                    <Skeleton />
+                                    <Skeleton />
+                                </>
+                            ) : (
+                                <>
+                                    <Typography>{systemInfo?.ServerName}</Typography>
+                                    <Typography>{systemInfo?.Version}</Typography>
+                                    <Typography>{__PACKAGE_JSON_VERSION__}</Typography>
+                                    <Typography>{__JF_BUILD_VERSION__}</Typography>
+                                </>
+                            )}
+                        </Stack>
+                    </Stack>
+                </Paper>
+
+                <Stack direction='row' spacing={1.5}>
+                    <Button
+                        onClick={onScanLibrariesClick}
+                        startIcon={<RefreshIcon />}
+                        sx={{
+                            fontWeight: 'bold'
+                        }}
+                    >
+                        {globalize.translate('ButtonScanAllLibraries')}
+                    </Button>
+
+                    <Button
+                        onClick={onRestartClick}
+                        startIcon={<RestartAltIcon />}
+                        color='error'
+                        sx={{
+                            fontWeight: 'bold'
+                        }}
+                    >
+                        {globalize.translate('Restart')}
+                    </Button>
+
+                    <Button
+                        onClick={onShutdownClick}
+                        startIcon={<PowerSettingsNewIcon />}
+                        color='error'
+                        sx={{
+                            fontWeight: 'bold'
+                        }}
+                    >
+                        {globalize.translate('ButtonShutdown')}
+                    </Button>
+                </Stack>
+            </Stack>
+        </Widget>
+    );
+};
+
+export default ServerInfoWidget;

src/apps/dashboard/components/widgets/ServerPathWidget.tsx

@@ -0,0 +1,50 @@
+import List from '@mui/material/List';
+import React from 'react';
+import StorageListItem from 'apps/dashboard/features/storage/components/StorageListItem';
+import globalize from 'lib/globalize';
+import Widget from './Widget';
+import { useSystemStorage } from 'apps/dashboard/features/storage/api/useSystemStorage';
+
+const ServerPathWidget = () => {
+    const { data: systemStorage } = useSystemStorage();
+
+    return (
+        <Widget
+            title={globalize.translate('HeaderPaths')}
+            href='/dashboard/settings'
+        >
+            <List sx={{ bgcolor: 'background.paper' }}>
+                <StorageListItem
+                    label={globalize.translate('LabelCache')}
+                    folder={systemStorage?.CacheFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelImageCache')}
+                    folder={systemStorage?.ImageCacheFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelProgramData')}
+                    folder={systemStorage?.ProgramDataFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelLogs')}
+                    folder={systemStorage?.LogFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelMetadata')}
+                    folder={systemStorage?.InternalMetadataFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelTranscodes')}
+                    folder={systemStorage?.TranscodingTempFolder}
+                />
+                <StorageListItem
+                    label={globalize.translate('LabelWeb')}
+                    folder={systemStorage?.WebFolder}
+                />
+            </List>
+        </Widget>
+    );
+};
+
+export default ServerPathWidget;

src/apps/dashboard/components/widgets/Widget.tsx

@@ -0,0 +1,38 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+type WidgetProps = {
+    title: string;
+    href: string;
+    children: React.ReactNode;
+};
+
+const Widget = ({ title, href, children }: WidgetProps) => {
+    return (
+        <Box>
+            <Button
+                component={RouterLink}
+                to={href}
+                variant='text'
+                color='inherit'
+                endIcon={<ChevronRight />}
+                sx={{
+                    marginTop: 1,
+                    marginBottom: 1
+                }}
+            >
+                <Typography variant='h3' component='span'>
+                    {title}
+                </Typography>
+            </Button>
+
+            {children}
+        </Box>
+    );
+};
+
+export default Widget;

src/apps/dashboard/constants/helpLinks.ts

@@ -22,10 +22,7 @@ export const HelpLinks = [
         paths: ['/dashboard/playback/transcoding'],
         url: 'https://jellyfin.org/docs/general/server/transcoding'
     }, {
-        paths: [
-            '/dashboard/plugins',
-            '/dashboard/plugins/catalog'
-        ],
+        paths: ['/dashboard/plugins'],
         url: 'https://jellyfin.org/docs/general/server/plugins/'
     }, {
         paths: ['/dashboard/plugins/repositories'],

src/apps/dashboard/controllers/library.js

@@ -1,18 +1,18 @@
 import escapeHtml from 'escape-html';
-import 'jquery';
-import taskButton from '../../scripts/taskbutton';
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import dom from '../../scripts/dom';
-import imageHelper from '../../utils/image';
-import '../../components/cardbuilder/card.scss';
-import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
-import Dashboard, { pageClassOn, pageIdOn } from '../../utils/dashboard';
-import confirm from '../../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
+
+import taskButton from 'scripts/taskbutton';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import dom from 'utils/dom';
+import imageHelper from 'utils/image';
+import 'components/cardbuilder/card.scss';
+import 'elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
+import { pageClassOn, pageIdOn } from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 function addVirtualFolder(page) {
-    import('../../components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
+    import('components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
         new MediaLibraryCreator({
             collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
                 return !f.hidden;
@@ -27,7 +27,7 @@ function addVirtualFolder(page) {
 }
 
 function editVirtualFolder(page, virtualFolder) {
-    import('../../components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
+    import('components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
         new MediaLibraryEditor({
             refresh: shouldRefreshLibraryAfterChanges(page),
             library: virtualFolder
@@ -61,7 +61,7 @@ function deleteVirtualFolder(page, virtualFolder) {
 }
 
 function refreshVirtualFolder(page, virtualFolder) {
-    import('../../components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
+    import('components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
         new RefreshDialog({
             itemIds: [virtualFolder.ItemId],
             serverId: ApiClient.serverId(),
@@ -71,7 +71,7 @@ function refreshVirtualFolder(page, virtualFolder) {
 }
 
 function renameVirtualFolder(page, virtualFolder) {
-    import('../../components/prompt/prompt').then(({ default: prompt }) => {
+    import('components/prompt/prompt').then(({ default: prompt }) => {
         prompt({
             label: globalize.translate('LabelNewName'),
             description: globalize.translate('MessageRenameMediaFolder'),
@@ -118,7 +118,7 @@ function showCardMenu(page, elem, virtualFolders) {
         icon: 'delete'
     });
 
-    import('../../components/actionSheet/actionSheet').then((actionsheet) => {
+    import('components/actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,
@@ -181,26 +181,33 @@ function reloadVirtualFolders(page, virtualFolders) {
     divVirtualFolders.innerHTML = html;
     divVirtualFolders.classList.add('itemsContainer');
     divVirtualFolders.classList.add('vertical-wrap');
-    $('.btnCardMenu', divVirtualFolders).on('click', function () {
-        showCardMenu(page, this, virtualFolders);
+    const btnCardMenuElements = divVirtualFolders.querySelectorAll('.btnCardMenu');
+    btnCardMenuElements.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            showCardMenu(page, btn, virtualFolders);
+        });
     });
     divVirtualFolders.querySelector('#addLibrary').addEventListener('click', function () {
         addVirtualFolder(page);
     });
-    $('.editLibrary', divVirtualFolders).on('click', function () {
-        const card = $(this).parents('.card')[0];
-        const index = parseInt(card.getAttribute('data-index'), 10);
-        const virtualFolder = virtualFolders[index];
 
-        if (virtualFolder.ItemId) {
-            editVirtualFolder(page, virtualFolder);
-        }
+    const libraryEditElements = divVirtualFolders.querySelectorAll('.editLibrary');
+    libraryEditElements.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            const card = dom.parentWithClass(btn, 'card');
+            const index = parseInt(card.getAttribute('data-index'), 10);
+            const virtualFolder = virtualFolders[index];
+
+            if (virtualFolder.ItemId) {
+                editVirtualFolder(page, virtualFolder);
+            }
+        });
     });
     loading.hide();
 }
 
 function editImages(page, virtualFolder) {
-    import('../../components/imageeditor/imageeditor').then((imageEditor) => {
+    import('components/imageeditor/imageeditor').then((imageEditor) => {
         imageEditor.show({
             itemId: virtualFolder.ItemId,
             serverId: ApiClient.serverId()
@@ -249,14 +256,9 @@ function getCollectionTypeOptions() {
 
 function getVirtualFolderHtml(page, virtualFolder, index) {
     let html = '';
-    let style = '';
-
-    if (page.classList.contains('wizardPage')) {
-        style += 'min-width:33.3%;';
-    }
 
     const elementId = virtualFolder.elementId ? `id="${virtualFolder.elementId}" ` : '';
-    html += '<div ' + elementId + 'class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
+    html += '<div ' + elementId + 'class="card backdropCard scalableCard backdropCard-scalable" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
 
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
@@ -357,11 +359,6 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
     return html;
 }
 
-window.WizardLibraryPage = {
-    next: function () {
-        Dashboard.navigate('wizardsettings.html');
-    }
-};
 pageClassOn('pageshow', 'mediaLibraryPage', function () {
     reloadLibrary(this);
 });

src/apps/dashboard/controllers/livetvguideprovider.js

@@ -1,15 +1,15 @@
-import loading from '../components/loading/loading';
-import globalize from '../lib/globalize';
-import Dashboard, { pageIdOn } from '../utils/dashboard';
-import { getParameterByName } from '../utils/url.ts';
-import Events from '../utils/events.ts';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import Dashboard, { pageIdOn } from 'utils/dashboard';
+import { getParameterByName } from 'utils/url';
+import Events from 'utils/events';
 
 function onListingsSubmitted() {
     Dashboard.navigate('dashboard/livetv');
 }
 
 function init(page, type, providerId) {
-    import(`../components/tvproviders/${type}`).then(({ default: ProviderFactory }) => {
+    import(`components/tvproviders/${type}`).then(({ default: ProviderFactory }) => {
         const instance = new ProviderFactory(page, providerId, {});
         Events.on(instance, 'submitted', onListingsSubmitted);
         instance.init();
@@ -17,7 +17,7 @@ function init(page, type, providerId) {
 }
 
 function loadTemplate(page, type, providerId) {
-    import(`../components/tvproviders/${type}.template.html`).then(({ default: html }) => {
+    import(`components/tvproviders/${type}.template.html`).then(({ default: html }) => {
         page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
         init(page, type, providerId);
     });

src/apps/dashboard/controllers/livetvstatus.js

@@ -1,19 +1,20 @@
 import 'jquery';
-import globalize from '../lib/globalize';
-import taskButton from '../scripts/taskbutton';
-import dom from '../scripts/dom';
-import layoutManager from '../components/layoutManager';
-import loading from '../components/loading/loading';
-import browser from '../scripts/browser';
-import '../components/listview/listview.scss';
-import '../styles/flexstyles.scss';
-import '../elements/emby-itemscontainer/emby-itemscontainer';
-import '../components/cardbuilder/card.scss';
+
+import globalize from 'lib/globalize';
+import taskButton from 'scripts/taskbutton';
+import dom from 'utils/dom';
+import layoutManager from 'components/layoutManager';
+import loading from 'components/loading/loading';
+import browser from 'scripts/browser';
+import 'components/listview/listview.scss';
+import 'styles/flexstyles.scss';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
+import 'components/cardbuilder/card.scss';
 import 'material-design-icons-iconfont';
-import '../elements/emby-button/emby-button';
-import Dashboard from '../utils/dashboard';
-import confirm from '../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../components/cardbuilder/cardBuilderUtils';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -89,8 +90,8 @@ function submitAddDeviceForm(page) {
         type: 'POST',
         url: ApiClient.getUrl('LiveTv/TunerHosts'),
         data: JSON.stringify({
-            Type: $('#selectTunerDeviceType', page).val(),
-            Url: $('#txtDevicePath', page).val()
+            Type: page.querySelector('#selectTunerDeviceType').value,
+            Url: page.querySelector('#txtDevicePath').value
         }),
         contentType: 'application/json'
     }).then(function () {
@@ -129,11 +130,17 @@ function renderProviders(page, providers) {
         html += '</div>';
     }
 
-    const elem = $('.providerList', page).html(html);
-    $('.btnOptions', elem).on('click', function () {
-        const id = this.getAttribute('data-id');
-        showProviderOptions(page, id, this);
-    });
+    const elem = page.querySelector('.providerList');
+    elem.innerHTML = html;
+    if (elem.querySelector('.btnOptions')) {
+        const btnOptionElements = elem.querySelectorAll('.btnOptions');
+        btnOptionElements.forEach(function (btn) {
+            btn.addEventListener('click', function () {
+                const id = this.getAttribute('data-id');
+                showProviderOptions(page, id, btn);
+            });
+        });
+    }
 }
 
 function showProviderOptions(page, providerId, button) {
@@ -147,7 +154,7 @@ function showProviderOptions(page, providerId, button) {
         id: 'map'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -165,7 +172,7 @@ function showProviderOptions(page, providerId, button) {
 }
 
 function mapChannels(page, providerId) {
-    import('../components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
+    import('components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
         new ChannelMapper({
             serverId: ApiClient.serverInfo().Id,
             providerId: providerId
@@ -237,7 +244,7 @@ function addProvider(button) {
         id: 'xmltv'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -263,7 +270,7 @@ function showDeviceMenu(button, tunerDeviceId) {
         id: 'edit'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -297,14 +304,17 @@ function onDevicesListClick(e) {
 
 $(document).on('pageinit', '#liveTvStatusPage', function () {
     const page = this;
-    $('.btnAddDevice', page).on('click', function () {
+    page.querySelector('.btnAddDevice').addEventListener('click', function () {
         addDevice();
     });
-    $('.formAddDevice', page).on('submit', function () {
-        submitAddDeviceForm(page);
-        return false;
-    });
-    $('.btnAddProvider', page).on('click', function () {
+    if (page.querySelector('.formAddDevice')) {
+        // NOTE: unused?
+        page.querySelector('.formAddDevice').addEventListener('submit', function (e) {
+            e.preventDefault();
+            submitAddDeviceForm(page);
+        });
+    }
+    page.querySelector('.btnAddProvider').addEventListener('click', function () {
         addProvider(this);
     });
     page.querySelector('.devicesList').addEventListener('click', onDevicesListClick);

src/apps/dashboard/controllers/livetvtuner.html

@@ -90,6 +90,14 @@
                     <div class="fieldDescription checkboxFieldDescription">${IgnoreDtsHelp}</div>
                 </div>
 
+                <div class="checkboxContainer checkboxContainer-withDescription fldReadInputAtNativeFramerate hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkReadInputAtNativeFramerate" checked />
+                        <span>${ReadInputAtNativeFramerate}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${ReadInputAtNativeFramerateHelp}</div>
+                </div>
+
                 <p class="drmMessage hide">${DrmChannelsNotImported}</p>
                 <br />
                 <input type="hidden" class="fldDeviceId" />

src/apps/dashboard/controllers/livetvtuner.js

@@ -1,12 +1,12 @@
-import globalize from '../lib/globalize';
-import loading from '../components/loading/loading';
-import dom from '../scripts/dom';
-import '../elements/emby-input/emby-input';
-import '../elements/emby-button/emby-button';
-import '../elements/emby-checkbox/emby-checkbox';
-import '../elements/emby-select/emby-select';
-import Dashboard from '../utils/dashboard';
-import { getParameterByName } from '../utils/url.ts';
+import globalize from 'lib/globalize';
+import loading from 'components/loading/loading';
+import dom from 'utils/dom';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
+import { getParameterByName } from 'utils/url';
 
 function isM3uVariant(type) {
     return ['nextpvr'].indexOf(type || '') !== -1;
@@ -64,6 +64,7 @@ function fillTunerHostInfo(view, info) {
     view.querySelector('.chkFmp4Container').checked = info.AllowFmp4TranscodingContainer;
     view.querySelector('.chkStreamSharing').checked = info.AllowStreamSharing;
     view.querySelector('.chkIgnoreDts').checked = info.IgnoreDts;
+    view.querySelector('.chkReadInputAtNativeFramerate').checked = info.ReadAtNativeFramerate;
     view.querySelector('.txtFallbackMaxStreamingBitrate').value = info.FallbackMaxStreamingBitrate / 1e6 || '30';
     view.querySelector('.txtTunerCount').value = info.TunerCount || '0';
 }
@@ -83,7 +84,8 @@ function submitForm(page) {
         AllowFmp4TranscodingContainer: page.querySelector('.chkFmp4Container').checked,
         AllowStreamSharing: page.querySelector('.chkStreamSharing').checked,
         EnableStreamLooping: page.querySelector('.chkStreamLoop').checked,
-        IgnoreDts: page.querySelector('.chkIgnoreDts').checked
+        IgnoreDts: page.querySelector('.chkIgnoreDts').checked,
+        ReadAtNativeFramerate: page.querySelector('.chkReadInputAtNativeFramerate').checked
     };
 
     if (isM3uVariant(info.Type)) {
@@ -112,7 +114,7 @@ function submitForm(page) {
 }
 
 function getDetectedDevice() {
-    return import('../components/tunerPicker').then(({ default: TunerPicker }) => {
+    return import('components/tunerPicker').then(({ default: TunerPicker }) => {
         return new TunerPicker().show({
             serverId: ApiClient.serverId()
         });
@@ -129,6 +131,7 @@ function onTypeChange() {
     const supportsTunerFileOrUrl = value === 'm3u';
     const supportsStreamLooping = value === 'm3u';
     const supportsIgnoreDts = value === 'm3u';
+    const supportsReadInputAtNativeFramerate = value === 'm3u';
     const supportsTunerCount = value === 'm3u';
     const supportsUserAgent = value === 'm3u';
     const supportsFmp4Container = value === 'm3u';
@@ -190,6 +193,8 @@ function onTypeChange() {
         view.querySelector('.fldIgnoreDts').classList.add('hide');
     }
 
+    view.querySelector('.fldReadInputAtNativeFramerate').classList.toggle('hide', !supportsReadInputAtNativeFramerate);
+
     if (supportsTunerCount) {
         view.querySelector('.fldTunerCount').classList.remove('hide');
         view.querySelector('.txtTunerCount').setAttribute('required', 'required');
@@ -235,7 +240,7 @@ export default function (view, params) {
         });
     });
     view.querySelector('.btnSelectPath').addEventListener('click', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeFiles: true,

src/apps/dashboard/controllers/networking.html

@@ -125,7 +125,7 @@
                     </fieldset>
 
 
-                    <fieldset class='verticalSection verticalSection-extrabottompadding hide'>
+                    <fieldset class='verticalSection verticalSection-extrabottompadding'>
                         <legend><h3>${HeaderAutoDiscovery}</h3></legend>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>

src/apps/dashboard/controllers/networking.js

@@ -1,9 +1,9 @@
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import '../../elements/emby-checkbox/emby-checkbox';
-import '../../elements/emby-select/emby-select';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function onSubmit(e) {
     const form = this;
@@ -159,7 +159,7 @@ export default function (view) {
         }
     });
     view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeFiles: true,

src/apps/dashboard/features/activity/api/useLogEntries.ts

@@ -7,15 +7,10 @@ import { useQuery } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 
 const fetchLogEntries = async (
-    api?: Api,
+    api: Api,
     requestParams?: ActivityLogApiGetLogEntriesRequest,
     options?: AxiosRequestConfig
 ) => {
-    if (!api) {
-        console.warn('[fetchLogEntries] No API instance available');
-        return;
-    }
-
     const response = await getActivityLogApi(api).getLogEntries(requestParams, {
         signal: options?.signal
     });
@@ -23,14 +18,15 @@ const fetchLogEntries = async (
     return response.data;
 };
 
-export const useLogEntires = (
+export const useLogEntries = (
     requestParams: ActivityLogApiGetLogEntriesRequest
 ) => {
     const { api } = useApi();
     return useQuery({
-        queryKey: ['LogEntries', requestParams],
+        queryKey: ['ActivityLogEntries', requestParams],
         queryFn: ({ signal }) =>
-            fetchLogEntries(api, requestParams, { signal }),
-        enabled: !!api
+            fetchLogEntries(api!, requestParams, { signal }),
+        enabled: !!api,
+        refetchOnMount: false
     });
 };

src/apps/dashboard/features/activity/components/ActionsCell.tsx

@@ -1,4 +1,4 @@
-import IconButton from '@mui/material/IconButton/IconButton';
+import IconButton from '@mui/material/IconButton';
 import PermMedia from '@mui/icons-material/PermMedia';
 import React, { type FC } from 'react';
 import { Link } from 'react-router-dom';

src/apps/dashboard/features/activity/components/ActivityListItem.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
+import Notifications from '@mui/icons-material/Notifications';
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import formatRelative from 'date-fns/formatRelative';
+import { getLocale } from 'utils/dateFnsLocale';
+import Stack from '@mui/material/Stack';
+import getLogLevelColor from '../utils/getLogLevelColor';
+import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+
+type ActivityListItemProps = {
+    item: ActivityLogEntry;
+    displayShortOverview: boolean;
+};
+
+const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps) => {
+    const relativeDate = useMemo(() => {
+        if (item.Date) {
+            return formatRelative(Date.parse(item.Date), Date.now(), { locale: getLocale() });
+        } else {
+            return 'N/A';
+        }
+    }, [ item ]);
+
+    return (
+        <ListItem disablePadding>
+            <ListItemButton>
+                <ListItemAvatar>
+                    <Avatar sx={{ bgcolor: getLogLevelColor(item.Severity || LogLevel.Information) + '.main' }}>
+                        <Notifications sx={{ color: '#fff' }} />
+                    </Avatar>
+                </ListItemAvatar>
+
+                <ListItemText
+                    primary={<Typography>{item.Name}</Typography>}
+                    secondary={(
+                        <Stack>
+                            <Typography variant='body1' color='text.secondary'>
+                                {relativeDate}
+                            </Typography>
+                            {displayShortOverview && (
+                                <Typography variant='body1' color='text.secondary'>
+                                    {item.ShortOverview}
+                                </Typography>
+                            )}
+                        </Stack>
+                    )}
+                    disableTypography
+                />
+            </ListItemButton>
+        </ListItem>
+    );
+};
+
+export default ActivityListItem;

src/apps/dashboard/features/activity/components/LogLevelChip.tsx

@@ -1,30 +1,17 @@
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
 import Chip from '@mui/material/Chip';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import globalize from 'lib/globalize';
+import getLogLevelColor from '../utils/getLogLevelColor';
 
 const LogLevelChip = ({ level }: { level: LogLevel }) => {
-    let color: 'info' | 'warning' | 'error' | undefined;
-    switch (level) {
-        case LogLevel.Information:
-            color = 'info';
-            break;
-        case LogLevel.Warning:
-            color = 'warning';
-            break;
-        case LogLevel.Error:
-        case LogLevel.Critical:
-            color = 'error';
-            break;
-    }
-
-    const levelText = globalize.translate(`LogLevel.${level}`);
+    const levelText = useMemo(() => globalize.translate(`LogLevel.${level}`), [level]);
 
     return (
         <Chip
             size='small'
-            color={color}
+            color={getLogLevelColor(level)}
             label={levelText}
             title={levelText}
         />

src/apps/dashboard/features/activity/utils/getLogLevelColor.ts

@@ -0,0 +1,15 @@
+import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+
+const getLogLevelColor = (level: LogLevel) => {
+    switch (level) {
+        case LogLevel.Information:
+            return 'info';
+        case LogLevel.Warning:
+            return 'warning';
+        case LogLevel.Error:
+        case LogLevel.Critical:
+            return 'error';
+    }
+};
+
+export default getLogLevelColor;

src/apps/dashboard/features/backups/api/useBackups.ts

@@ -0,0 +1,37 @@
+import { Api } from '@jellyfin/sdk';
+import { BackupApi } from '@jellyfin/sdk/lib/generated-client/api/backup-api';
+import { useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+import { useApi } from 'hooks/useApi';
+
+export const QUERY_KEY = 'Backups';
+
+const fetchBackups = async (api: Api, options?: AxiosRequestConfig) => {
+    // FIXME: Replace with getBackupApi when available in SDK
+    const backupApi = new BackupApi(api.configuration, undefined, api.axiosInstance);
+
+    const response = await backupApi.listBackups(options);
+
+    const backups = response.data;
+
+    backups.sort((a, b) => {
+        if (a.DateCreated && b.DateCreated) {
+            return new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime();
+        } else {
+            return 0;
+        }
+    });
+
+    return backups;
+};
+
+export const useBackups = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ QUERY_KEY ],
+        queryFn: ({ signal }) =>
+            fetchBackups(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/backups/api/useCreateBackup.ts

@@ -0,0 +1,25 @@
+import type { BackupOptionsDto } from '@jellyfin/sdk/lib/generated-client/models/backup-options-dto';
+import { BackupApi } from '@jellyfin/sdk/lib/generated-client/api/backup-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { QUERY_KEY } from './useBackups';
+import { queryClient } from 'utils/query/queryClient';
+
+export const useCreateBackup = () => {
+    const { api } = useApi();
+    // FIXME: Replace with getBackupApi when available in SDK
+    const backupApi = new BackupApi(api?.configuration, undefined, api?.axiosInstance);
+
+    return useMutation({
+        mutationFn: (backupOptions: BackupOptionsDto) => (
+            backupApi.createBackup({
+                backupOptionsDto: backupOptions
+            })
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/backups/api/useRestoreBackup.ts

@@ -0,0 +1,19 @@
+import { BackupApi } from '@jellyfin/sdk/lib/generated-client/api/backup-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+
+export const useRestoreBackup = () => {
+    const { api } = useApi();
+    // FIXME: Replace with getBackupApi when available in SDK
+    const backupApi = new BackupApi(api?.configuration, undefined, api?.axiosInstance);
+
+    return useMutation({
+        mutationFn: (fileName: string) => (
+            backupApi.startRestoreBackup({
+                backupRestoreRequestDto: {
+                    ArchiveFileName: fileName
+                }
+            })
+        )
+    });
+};

src/apps/dashboard/features/backups/components/Backup.tsx

@@ -0,0 +1,68 @@
+import React, { FunctionComponent, useCallback, useState } from 'react';
+import type { BackupManifestDto } from '@jellyfin/sdk/lib/generated-client/models/backup-manifest-dto';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Restore from '@mui/icons-material/Restore';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Tooltip from '@mui/material/Tooltip';
+import globalize from 'lib/globalize';
+import BackupInfoDialog from './BackupInfoDialog';
+
+type BackupProps = {
+    backup: BackupManifestDto;
+    onRestore: (backup: BackupManifestDto) => void;
+};
+
+const Backup: FunctionComponent<BackupProps> = ({ backup, onRestore }) => {
+    const [ isInfoDialogOpen, setIsInfoDialogOpen ] = useState(false);
+
+    const onDialogClose = useCallback(() => {
+        setIsInfoDialogOpen(false);
+    }, []);
+
+    const openDialog = useCallback(() => {
+        setIsInfoDialogOpen(true);
+    }, []);
+
+    const restore = useCallback(() => {
+        onRestore(backup);
+    }, [ backup, onRestore ]);
+
+    return (
+        <>
+            <BackupInfoDialog
+                backup={backup}
+                onClose={onDialogClose}
+                open={isInfoDialogOpen}
+            />
+            <ListItem
+                disablePadding
+                secondaryAction={
+                    <Tooltip disableInteractive title={globalize.translate('LabelRestore')}>
+                        <IconButton onClick={restore}>
+                            <Restore />
+                        </IconButton>
+                    </Tooltip>
+                }
+            >
+                <ListItemButton onClick={openDialog}>
+                    <ListItemText
+                        primary={backup.DateCreated}
+                        secondary={backup.Path}
+                        slotProps={{
+                            primary: {
+                                variant: 'h3'
+                            },
+                            secondary: {
+                                variant: 'body1'
+                            }
+                        }}
+                    />
+                </ListItemButton>
+            </ListItem>
+        </>
+    );
+};
+
+export default Backup;

src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx

@@ -0,0 +1,135 @@
+import type { BackupManifestDto } from '@jellyfin/sdk/lib/generated-client/models/backup-manifest-dto';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Box from '@mui/material/Box';
+import globalize from 'lib/globalize';
+import React, { FunctionComponent, useCallback } from 'react';
+import Stack from '@mui/material/Stack';
+import FormGroup from '@mui/material/FormGroup';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import IconButton from '@mui/material/IconButton';
+import { copy } from 'scripts/clipboard';
+import toast from 'components/toast/toast';
+
+type IProps = {
+    backup: BackupManifestDto;
+    open: boolean;
+    onClose: () => void;
+};
+
+const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }: IProps) => {
+    const copyPath = useCallback(async () => {
+        if (backup.Path) {
+            await copy(backup.Path);
+            toast({ text: globalize.translate('Copied') });
+        }
+    }, [ backup.Path ]);
+
+    return (
+        <Dialog
+            onClose={onClose}
+            open={open}
+            maxWidth={'sm'}
+            fullWidth
+        >
+            <DialogTitle>
+                {backup.DateCreated}
+            </DialogTitle>
+
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Box>
+                        <Stack
+                            direction='row'
+                            spacing={2}
+                        >
+                            <Typography fontWeight='bold'>{globalize.translate('LabelPath')}</Typography>
+                            <Stack direction='row'>
+                                <Typography color='text.secondary'>{backup.Path}</Typography>
+                                <IconButton size='small' onClick={copyPath}>
+                                    <ContentCopy fontSize='small' />
+                                </IconButton>
+                            </Stack>
+                        </Stack>
+                        <Stack
+                            direction='row'
+                            spacing={2}
+                        >
+                            <Typography fontWeight='bold'>{globalize.translate('LabelVersion')}</Typography>
+                            <Typography color='text.secondary'>{backup.ServerVersion}</Typography>
+                        </Stack>
+                    </Box>
+
+                    <FormGroup>
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Database'
+                                        defaultChecked={true}
+                                        disabled
+                                    />
+                                }
+                                label={globalize.translate('LabelDatabase')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Metadata'
+                                        defaultChecked={backup.Options?.Metadata}
+                                        disabled
+                                    />
+                                }
+                                label={globalize.translate('LabelMetadata')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Subtitles'
+                                        defaultChecked={backup.Options?.Subtitles}
+                                        disabled
+                                    />
+                                }
+                                label={globalize.translate('Subtitles')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Trickplay'
+                                        defaultChecked={backup.Options?.Trickplay}
+                                        disabled
+                                    />
+                                }
+                                label={globalize.translate('Trickplay')}
+                            />
+                        </FormControl>
+                    </FormGroup>
+                </Stack>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={onClose}>
+                    {globalize.translate('ButtonOk')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default BackupInfoDialog;

src/apps/dashboard/features/backups/components/BackupProgressDialog.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import LinearProgress from '@mui/material/LinearProgress';
+import globalize from 'lib/globalize';
+
+type IProps = {
+    open: boolean
+};
+
+const BackupProgressDialog: FunctionComponent<IProps> = ({ open }) => {
+    return (
+        <Dialog
+            open={open}
+            maxWidth={'xs'}
+            fullWidth
+        >
+            <DialogTitle>{globalize.translate('MessageBackupInProgress')}</DialogTitle>
+            <DialogContent>
+                <LinearProgress />
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default BackupProgressDialog;

src/apps/dashboard/features/backups/components/CreateBackupForm.tsx

@@ -0,0 +1,123 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import globalize from 'lib/globalize';
+import type { BackupOptionsDto } from '@jellyfin/sdk/lib/generated-client/models/backup-options-dto';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import Stack from '@mui/material/Stack';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import FormGroup from '@mui/material/FormGroup';
+import DialogContentText from '@mui/material/DialogContentText';
+
+type IProps = {
+    open: boolean,
+    onClose?: () => void,
+    onCreate: (backupOptions: BackupOptionsDto) => void
+};
+
+const CreateBackupForm: FunctionComponent<IProps> = ({ open, onClose, onCreate }) => {
+    const onSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        const formData = new FormData(e.currentTarget);
+
+        const data = Object.fromEntries(formData.entries());
+
+        const backupOptions: BackupOptionsDto = {
+            'Metadata': data.Metadata?.toString() === 'on',
+            'Trickplay': data.Trickplay?.toString() === 'on',
+            'Subtitles': data.Subtitles?.toString() === 'on'
+        };
+
+        onCreate(backupOptions);
+    }, [ onCreate ]);
+
+    return (
+        <Dialog
+            open={open}
+            maxWidth={'xs'}
+            fullWidth
+            onClose={onClose}
+            slotProps={{
+                paper: {
+                    component: 'form',
+                    onSubmit
+                }
+            }}
+        >
+            <DialogTitle>{globalize.translate('ButtonCreateBackup')}</DialogTitle>
+
+            <DialogContent>
+                <Stack spacing={2}>
+                    <DialogContentText>
+                        {globalize.translate('MessageBackupDisclaimer')}
+                    </DialogContentText>
+                    <FormGroup>
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Database'
+                                        defaultChecked={true}
+                                        disabled
+                                    />
+                                }
+                                label={globalize.translate('LabelDatabase')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Metadata'
+                                        defaultChecked={false}
+                                    />
+                                }
+                                label={globalize.translate('LabelMetadata')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Subtitles'
+                                        defaultChecked={false}
+                                    />
+                                }
+                                label={globalize.translate('Subtitles')}
+                            />
+                        </FormControl>
+
+                        <FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name='Trickplay'
+                                        defaultChecked={false}
+                                    />
+                                }
+                                label={globalize.translate('Trickplay')}
+                            />
+                        </FormControl>
+                    </FormGroup>
+                </Stack>
+            </DialogContent>
+
+            <DialogActions>
+                <Button
+                    onClick={onClose}
+                    variant='text'
+                >{globalize.translate('ButtonCancel')}</Button>
+                <Button type='submit'>{globalize.translate('Create')}</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default CreateBackupForm;

src/apps/dashboard/features/backups/components/RestoreConfirmationDialog.tsx

@@ -0,0 +1,46 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import globalize from 'lib/globalize';
+import React, { FunctionComponent } from 'react';
+
+type IProps = {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+};
+
+const RestoreConfirmationDialog: FunctionComponent<IProps> = ({ open, onClose, onConfirm }: IProps) => {
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth={'xs'}
+            fullWidth
+        >
+            <DialogTitle>
+                {globalize.translate('LabelRestore')}
+            </DialogTitle>
+
+            <DialogContent>
+                <DialogContentText>
+                    {globalize.translate('MessageRestoreDisclaimer')}
+                </DialogContentText>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={onClose} variant='text'>
+                    {globalize.translate('ButtonCancel')}
+                </Button>
+                <Button onClick={onConfirm}>
+                    {globalize.translate('LabelRestore')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default RestoreConfirmationDialog;

src/apps/dashboard/features/backups/components/RestoreProgressDialog.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import LinearProgress from '@mui/material/LinearProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Stack from '@mui/material/Stack';
+import globalize from 'lib/globalize';
+
+type IProps = {
+    open: boolean
+};
+
+const RestoreProgressDialog: FunctionComponent<IProps> = ({ open }) => {
+    return (
+        <Dialog
+            open={open}
+            maxWidth={'xs'}
+            fullWidth
+        >
+            <DialogTitle>{globalize.translate('MessageRestoreInProgress')}</DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <DialogContentText>{globalize.translate('MessageWaitingForServer')}</DialogContentText>
+                    <LinearProgress />
+                </Stack>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default RestoreProgressDialog;

src/apps/dashboard/features/branding/api/useBrandingOptions.ts

@@ -8,14 +8,9 @@ import { useApi } from 'hooks/useApi';
 export const QUERY_KEY = 'BrandingOptions';
 
 const fetchBrandingOptions = async (
-    api?: Api,
+    api: Api,
     options?: AxiosRequestConfig
 ) => {
-    if (!api) {
-        console.error('[fetchBrandingOptions] no Api instance provided');
-        throw new Error('No Api instance provided to fetchBrandingOptions');
-    }
-
     return getBrandingApi(api)
         .getBrandingOptions(options)
         .then(({ data }) => data);
@@ -25,7 +20,7 @@ export const getBrandingOptionsQuery = (
     api?: Api
 ) => queryOptions({
     queryKey: [ QUERY_KEY ],
-    queryFn: ({ signal }) => fetchBrandingOptions(api, { signal }),
+    queryFn: ({ signal }) => fetchBrandingOptions(api!, { signal }),
     enabled: !!api
 });
 

src/apps/dashboard/features/devices/api/useDeleteDevice.ts

@@ -0,0 +1,23 @@
+import type { DevicesApiDeleteDeviceRequest } from '@jellyfin/sdk/lib/generated-client/api/devices-api';
+import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useDevices';
+
+export const useDeleteDevice = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: DevicesApiDeleteDeviceRequest) => (
+            getDevicesApi(api!)
+                .deleteDevice(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/devices/api/useDevices.ts

@@ -0,0 +1,33 @@
+import type { DevicesApiGetDevicesRequest } from '@jellyfin/sdk/lib/generated-client';
+import type { AxiosRequestConfig } from 'axios';
+import type { Api } from '@jellyfin/sdk';
+import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+
+export const QUERY_KEY = 'Devices';
+
+const fetchDevices = async (
+    api: Api,
+    requestParams?: DevicesApiGetDevicesRequest,
+    options?: AxiosRequestConfig
+) => {
+    const response = await getDevicesApi(api).getDevices(requestParams, {
+        signal: options?.signal
+    });
+
+    return response.data;
+};
+
+export const useDevices = (
+    requestParams: DevicesApiGetDevicesRequest
+) => {
+    const { api } = useApi();
+    return useQuery({
+        queryKey: [QUERY_KEY, requestParams],
+        queryFn: ({ signal }) =>
+            fetchDevices(api!, requestParams, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/devices/api/useUpdateDevice.ts

@@ -0,0 +1,23 @@
+import type { DevicesApiUpdateDeviceOptionsRequest } from '@jellyfin/sdk/lib/generated-client/api/devices-api';
+import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useDevices';
+
+export const useUpdateDevice = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: DevicesApiUpdateDeviceOptionsRequest) => (
+            getDevicesApi(api!)
+                .updateDeviceOptions(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/devices/components/DeviceCard.tsx

@@ -0,0 +1,259 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import { getDeviceIcon } from 'utils/image';
+import Stack from '@mui/material/Stack';
+import getNowPlayingName from '../../sessions/utils/getNowPlayingName';
+import getSessionNowPlayingTime from '../../sessions/utils/getSessionNowPlayingTime';
+import getNowPlayingImageUrl from '../../sessions/utils/getNowPlayingImageUrl';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import Comment from '@mui/icons-material/Comment';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import Pause from '@mui/icons-material/Pause';
+import Stop from '@mui/icons-material/Stop';
+import Info from '@mui/icons-material/Info';
+import LinearProgress from '@mui/material/LinearProgress';
+import CardActions from '@mui/material/CardActions';
+import IconButton from '@mui/material/IconButton';
+import SimpleAlert from 'components/SimpleAlert';
+import playmethodhelper from 'components/playback/playmethodhelper';
+import globalize from 'lib/globalize';
+import getSessionNowPlayingStreamInfo from '../../sessions/utils/getSessionNowPlayingStreamInfo';
+import { useSendPlayStateCommand } from '../../sessions/api/usePlayPauseSession';
+import { PlaystateCommand } from '@jellyfin/sdk/lib/generated-client/models/playstate-command';
+import InputDialog from 'components/InputDialog';
+import { useSendMessage } from '../../sessions/api/useSendMessage';
+
+type DeviceCardProps = {
+    device: SessionInfo;
+};
+
+const DeviceCard = ({ device }: DeviceCardProps) => {
+    const [ playbackInfoTitle, setPlaybackInfoTitle ] = useState('');
+    const [ playbackInfoDesc, setPlaybackInfoDesc ] = useState('');
+    const [ isPlaybackInfoOpen, setIsPlaybackInfoOpen ] = useState(false);
+    const [ isMessageDialogOpen, setIsMessageDialogOpen ] = useState(false);
+    const sendMessage = useSendMessage();
+    const playStateCommand = useSendPlayStateCommand();
+
+    const onPlayPauseSession = useCallback(() => {
+        if (device.Id) {
+            playStateCommand.mutate({
+                sessionId: device.Id,
+                command: PlaystateCommand.PlayPause
+            });
+        }
+    }, [ device, playStateCommand ]);
+
+    const onStopSession = useCallback(() => {
+        if (device.Id) {
+            playStateCommand.mutate({
+                sessionId: device.Id,
+                command: PlaystateCommand.Stop
+            });
+        }
+    }, [ device, playStateCommand ]);
+
+    const onMessageSend = useCallback((message: string) => {
+        if (device.Id) {
+            sendMessage.mutate({
+                sessionId: device.Id,
+                messageCommand: {
+                    Text: message,
+                    TimeoutMs: 5000
+                }
+            });
+            setIsMessageDialogOpen(false);
+        }
+    }, [ sendMessage, device ]);
+
+    const showMessageDialog = useCallback(() => {
+        setIsMessageDialogOpen(true);
+    }, []);
+
+    const onMessageDialogClose = useCallback(() => {
+        setIsMessageDialogOpen(false);
+    }, []);
+
+    const closePlaybackInfo = useCallback(() => {
+        setIsPlaybackInfoOpen(false);
+    }, []);
+
+    const showPlaybackInfo = useCallback(() => {
+        const displayPlayMethod = playmethodhelper.getDisplayPlayMethod(device);
+
+        switch (displayPlayMethod) {
+            case 'Remux':
+                setPlaybackInfoTitle(globalize.translate('Remuxing'));
+                setPlaybackInfoDesc(globalize.translate('RemuxHelp1') + '\n' + globalize.translate('RemuxHelp2'));
+                break;
+            case 'DirectStream':
+                setPlaybackInfoTitle(globalize.translate('DirectStreaming'));
+                setPlaybackInfoDesc(globalize.translate('DirectStreamHelp1') + '\n' + globalize.translate('DirectStreamHelp2'));
+                break;
+            case 'DirectPlay':
+                setPlaybackInfoTitle(globalize.translate('DirectPlaying'));
+                setPlaybackInfoDesc(globalize.translate('DirectPlayHelp'));
+                break;
+            case 'Transcode': {
+                const transcodeReasons = device.TranscodingInfo?.TranscodeReasons as string[] | undefined;
+                const localizedTranscodeReasons = transcodeReasons?.map(transcodeReason => globalize.translate(transcodeReason)) || [];
+                setPlaybackInfoTitle(globalize.translate('Transcoding'));
+                setPlaybackInfoDesc(
+                    globalize.translate('MediaIsBeingConverted')
+                    + '\n\n' + getSessionNowPlayingStreamInfo(device)
+                    + '\n\n' + globalize.translate('LabelReasonForTranscoding')
+                    + '\n' + localizedTranscodeReasons.join('\n')
+                );
+                break;
+            }
+        }
+
+        setIsPlaybackInfoOpen(true);
+    }, [ device ]);
+
+    const nowPlayingName = useMemo(() => (
+        getNowPlayingName(device)
+    ), [ device ]);
+
+    const nowPlayingImage = useMemo(() => (
+        device.NowPlayingItem && getNowPlayingImageUrl(device.NowPlayingItem)
+    ), [device]);
+
+    const runningTime = useMemo(() => (
+        getSessionNowPlayingTime(device)
+    ), [ device ]);
+
+    const deviceIcon = useMemo(() => (
+        getDeviceIcon(device)
+    ), [ device ]);
+
+    const canControl = device.ServerId && device.SupportsRemoteControl;
+    const isPlayingMedia = !!device.NowPlayingItem;
+
+    return (
+        <Card sx={{ width: { xs: '100%', sm: '360px' } }}>
+            <InputDialog
+                open={isMessageDialogOpen}
+                onClose={onMessageDialogClose}
+                title={globalize.translate('HeaderSendMessage')}
+                label={globalize.translate('LabelMessageText')}
+                confirmButtonText={globalize.translate('ButtonSend')}
+                onConfirm={onMessageSend}
+            />
+            <SimpleAlert
+                open={isPlaybackInfoOpen}
+                title={playbackInfoTitle}
+                text={playbackInfoDesc}
+                onClose={closePlaybackInfo}
+            />
+            <CardMedia
+                sx={{
+                    height: 200,
+                    display: 'flex'
+                }}
+                className={getDefaultBackgroundClass(device.Id)}
+                image={nowPlayingImage || undefined}
+            >
+                <Stack
+                    justifyContent={'space-between'}
+                    flexGrow={1}
+                    sx={{
+                        backgroundColor: nowPlayingImage ? 'rgba(0, 0, 0, 0.7)' : null,
+                        padding: 2
+                    }}>
+                    <Stack direction='row' alignItems='center' spacing={1}>
+                        <img
+                            src={deviceIcon}
+                            style={{
+                                maxWidth: '2.5em',
+                                maxHeight: '2.5em'
+                            }}
+                            alt={device.DeviceName || ''}
+                        />
+                        <Stack>
+                            <Typography>{device.DeviceName}</Typography>
+                            <Typography>{device.Client + ' ' + device.ApplicationVersion}</Typography>
+                        </Stack>
+                    </Stack>
+                    <Stack direction='row' alignItems={'end'}>
+                        <Stack flexGrow={1}>
+                            {nowPlayingName.image ? (
+                                <img
+                                    src={nowPlayingName.image}
+                                    style={{
+                                        maxHeight: '24px',
+                                        maxWidth: '130px',
+                                        alignSelf: 'flex-start'
+                                    }}
+                                    alt='Media Icon'
+                                />
+                            ) : (
+                                <Typography>{nowPlayingName.topText}</Typography>
+                            )}
+                            <Typography>{nowPlayingName.bottomText}</Typography>
+                        </Stack>
+                        {device.NowPlayingItem && (
+                            <Typography>{runningTime.start} / {runningTime.end}</Typography>
+                        )}
+                    </Stack>
+                </Stack>
+            </CardMedia>
+            {(device.PlayState?.PositionTicks != null && device.NowPlayingItem?.RunTimeTicks != null) && (
+                <LinearProgress
+                    variant='buffer'
+                    value={(device.PlayState.PositionTicks / device.NowPlayingItem.RunTimeTicks) * 100}
+                    valueBuffer={device.TranscodingInfo?.CompletionPercentage || 0}
+                    sx={{
+                        '& .MuiLinearProgress-dashed': {
+                            animation: 'none',
+                            backgroundImage: 'none',
+                            backgroundColor: 'background.paper'
+                        },
+                        '& .MuiLinearProgress-bar2': {
+                            backgroundColor: '#dd4919'
+                        }
+                    }}
+                />
+            )}
+            <CardActions disableSpacing>
+                <Stack direction='row' flexGrow={1} justifyContent='center'>
+                    {canControl && isPlayingMedia && (
+                        <>
+                            <IconButton onClick={onPlayPauseSession}>
+                                {device.PlayState?.IsPaused ? <PlayArrow /> : <Pause />}
+                            </IconButton>
+                            <IconButton onClick={onStopSession}>
+                                <Stop />
+                            </IconButton>
+                        </>
+                    )}
+                    {isPlayingMedia && (
+                        <IconButton onClick={showPlaybackInfo}>
+                            <Info />
+                        </IconButton>
+                    )}
+                    {canControl && (
+                        <IconButton onClick={showMessageDialog}>
+                            <Comment />
+                        </IconButton>
+                    )}
+                </Stack>
+            </CardActions>
+            {device.UserName && (
+                <Stack
+                    direction='row'
+                    flexGrow={1}
+                    justifyContent='center'
+                    sx={{ paddingBottom: 2 }}
+                >
+                    <Typography>{device.UserName}</Typography>
+                </Stack>
+            )}
+        </Card>
+    );
+};
+
+export default DeviceCard;

src/apps/dashboard/features/devices/components/DeviceNameCell.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell';
+import { getDeviceIcon } from 'utils/image';
+
+const DeviceNameCell: FC<DeviceInfoCell> = ({ row, renderedCellValue }) => (
+    <>
+        <img
+            alt={row.original.AppName || undefined}
+            src={getDeviceIcon(row.original)}
+            style={{
+                display: 'inline-block',
+                maxWidth: '1.5em',
+                maxHeight: '1.5em',
+                marginRight: '1rem'
+            }}
+        />
+        {renderedCellValue}
+    </>
+);
+
+export default DeviceNameCell;

src/apps/dashboard/features/devices/types/deviceInfoCell.ts

@@ -0,0 +1,7 @@
+import type { DeviceInfoDto } from '@jellyfin/sdk/lib/generated-client/models/device-info-dto';
+import type { MRT_Row } from 'material-react-table';
+
+export interface DeviceInfoCell {
+    renderedCellValue: React.ReactNode
+    row: MRT_Row<DeviceInfoDto>
+}

src/apps/dashboard/features/keys/api/useApiKeys.ts

@@ -0,0 +1,23 @@
+import { Api } from '@jellyfin/sdk';
+import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { useQuery } from '@tanstack/react-query';
+import { AxiosRequestConfig } from 'axios';
+import { useApi } from 'hooks/useApi';
+
+export const QUERY_KEY = 'ApiKeys';
+
+const fetchApiKeys = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getApiKeyApi(api).getKeys(options);
+
+    return response.data;
+};
+
+export const useApiKeys = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ QUERY_KEY ],
+        queryFn: ({ signal }) => fetchApiKeys(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/keys/api/useCreateKey.ts

@@ -0,0 +1,22 @@
+import { ApiKeyApiCreateKeyRequest } from '@jellyfin/sdk/lib/generated-client/api/api-key-api';
+import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useApiKeys';
+
+export const useCreateKey = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: ApiKeyApiCreateKeyRequest) => (
+            getApiKeyApi(api!)
+                .createKey(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/keys/api/useRevokeKey.ts

@@ -0,0 +1,22 @@
+import type { ApiKeyApiRevokeKeyRequest } from '@jellyfin/sdk/lib/generated-client';
+import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useApiKeys';
+
+export const useRevokeKey = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: ApiKeyApiRevokeKeyRequest) => (
+            getApiKeyApi(api!)
+                .revokeKey(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/libraries/api/useCountries.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchCountries = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getLocalizationApi(api).getCountries(options);
+
+    return response.data;
+};
+
+export const useCountries = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'Countries' ],
+        queryFn: ({ signal }) => fetchCountries(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/libraries/api/useCultures.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchCultures = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getLocalizationApi(api).getCultures(options);
+
+    return response.data;
+};
+
+export const useCultures = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'Cultures' ],
+        queryFn: ({ signal }) => fetchCultures(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/libraries/utils/metadataOptions.ts

@@ -0,0 +1,19 @@
+import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image-resolution';
+import globalize from 'lib/globalize';
+
+export function getImageResolutionOptions() {
+    return [
+        {
+            name: globalize.translate('ResolutionMatchSource'),
+            value: ImageResolution.MatchSource
+        },
+        { name: '2160p', value: ImageResolution.P2160 },
+        { name: '1440p', value: ImageResolution.P1440 },
+        { name: '1080p', value: ImageResolution.P1080 },
+        { name: '720p', value: ImageResolution.P720 },
+        { name: '480p', value: ImageResolution.P480 },
+        { name: '360p', value: ImageResolution.P360 },
+        { name: '240p', value: ImageResolution.P240 },
+        { name: '144p', value: ImageResolution.P144 }
+    ];
+};

src/apps/dashboard/features/logs/api/useServerLog.ts

@@ -0,0 +1,25 @@
+import { Api } from '@jellyfin/sdk';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchServerLog = async (
+    api: Api,
+    name: string,
+    options?: AxiosRequestConfig
+) => {
+    const response = await getSystemApi(api).getLogFile({ name }, options);
+
+    // FIXME: TypeScript SDK thinks it is returning a File but in reality it is a string
+    return response.data as never as string;
+};
+export const useServerLog = (name: string) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['ServerLog', name],
+        queryFn: ({ signal }) => fetchServerLog(api!, name, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/logs/api/useServerLogs.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchServerLogs = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getSystemApi(api!).getServerLogs(options);
+
+    return response.data;
+};
+
+export const useServerLogs = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'ServerLogs' ],
+        queryFn: ({ signal }) => fetchServerLogs(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/logs/components/LogItemList.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent } from 'react';
+import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import datetime from 'scripts/datetime';
+import ListItemLink from 'components/ListItemLink';
+
+type LogItemProps = {
+    logs: LogFile[];
+};
+
+const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) => {
+    const getDate = (logFile: LogFile) => {
+        const date = datetime.parseISO8601Date(logFile.DateModified, true);
+        return datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
+    };
+
+    return (
+        <List sx={{ bgcolor: 'background.paper' }}>
+            {logs.map(log => {
+                return (
+                    <ListItem key={log.Name} disablePadding>
+                        <ListItemLink to={`/dashboard/logs/${log.Name}`}>
+                            <ListItemText
+                                primary={log.Name}
+                                secondary={getDate(log)}
+                                slotProps={{
+                                    primary: {
+                                        variant: 'h3'
+                                    },
+                                    secondary: {
+                                        variant: 'body1'
+                                    }
+                                }}
+                            />
+                        </ListItemLink>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export default LogItemList;

src/apps/dashboard/features/metrics/api/useItemCounts.ts

@@ -0,0 +1,34 @@
+import type { Api } from '@jellyfin/sdk';
+import type { LibraryApiGetItemCountsRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+const fetchItemCounts = async (
+    api: Api,
+    params?: LibraryApiGetItemCountsRequest,
+    options?: AxiosRequestConfig
+) => {
+    const response = await getLibraryApi(api)
+        .getItemCounts(params, options);
+    return response.data;
+};
+
+const getItemCountsQuery = (
+    api?: Api,
+    params?: LibraryApiGetItemCountsRequest
+) => queryOptions({
+    queryKey: [ 'ItemCounts', params ],
+    queryFn: ({ signal }) => fetchItemCounts(api!, params, { signal }),
+    enabled: !!api,
+    refetchOnWindowFocus: false
+});
+
+export const useItemCounts = (
+    params?: LibraryApiGetItemCountsRequest
+) => {
+    const { api } = useApi();
+    return useQuery(getItemCountsQuery(api, params));
+};

src/apps/dashboard/features/metrics/components/MetricCard.tsx

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+import React, { type FC } from 'react';
+
+import { useLocale } from 'hooks/useLocale';
+import { toDecimalString } from 'utils/number';
+
+interface Metric {
+    label: string
+    value?: number
+}
+
+export interface MetricCardProps {
+    metrics: Metric[]
+    Icon: typeof SvgIcon
+}
+
+const MetricCard: FC<MetricCardProps> = ({
+    metrics,
+    Icon
+}) => {
+    const { dateTimeLocale } = useLocale();
+
+    return (
+        <Card
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                height: '100%'
+            }}
+        >
+            <Stack
+                direction='row'
+                sx={{
+                    width: '100%',
+                    padding: 2,
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                }}
+            >
+                {metrics.map(({ label, value }) => (
+                    <Box key={label}>
+                        <Typography
+                            variant='body2'
+                            color='text.secondary'
+                        >
+                            {label}
+                        </Typography>
+                        <Typography
+                            variant='h5'
+                            component='div'
+                        >
+                            {typeof value !== 'undefined' ? (
+                                toDecimalString(value, dateTimeLocale)
+                            ) : (
+                                <Skeleton />
+                            )}
+                        </Typography>
+                    </Box>
+                ))}
+                <Icon fontSize='large' />
+            </Stack>
+        </Card>
+    );
+};
+
+export default MetricCard;

src/apps/dashboard/features/playback/constants/codecs.ts

@@ -0,0 +1,113 @@
+/** List of codecs and their supported hardware acceleration types */
+export const CODECS = [
+    {
+        name: 'H264',
+        codec: 'h264',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp',
+            'videotoolbox',
+            'v4l2m2m'
+        ]
+    },
+    {
+        name: 'HEVC',
+        codec: 'hevc',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp',
+            'videotoolbox'
+        ]
+    },
+    {
+        name: 'MPEG1',
+        codec: 'mpeg1video',
+        types: [ 'rkmpp' ]
+    },
+    {
+        name: 'MPEG2',
+        codec: 'mpeg2video',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp'
+        ]
+    },
+    {
+        name: 'MPEG4',
+        codec: 'mpeg4',
+        types: [
+            'nvenc',
+            'rkmpp'
+        ]
+    },
+    {
+        name: 'VC1',
+        codec: 'vc1',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi'
+        ]
+    },
+    {
+        name: 'VP8',
+        codec: 'vp8',
+        types: [
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp',
+            'videotoolbox'
+        ]
+    },
+    {
+        name: 'VP9',
+        codec: 'vp9',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp',
+            'videotoolbox'
+        ]
+    },
+    {
+        name: 'AV1',
+        codec: 'av1',
+        types: [
+            'amf',
+            'nvenc',
+            'qsv',
+            'vaapi',
+            'rkmpp',
+            'videotoolbox'
+        ]
+    }
+];
+
+/** Hardware decoders which support 10-bit HEVC & VP9 */
+export const HEVC_VP9_HW_DECODING_TYPES = [
+    'amf',
+    'nvenc',
+    'qsv',
+    'vaapi',
+    'rkmpp'
+];
+
+/** Hardware decoders which support HEVC RExt */
+export const HEVC_REXT_DECODING_TYPES = [
+    'nvenc',
+    'qsv',
+    'vaapi'
+];

src/apps/dashboard/features/plugins/api/queryKey.ts

@@ -1,5 +1,6 @@
 export enum QueryKey {
     ConfigurationPages = 'ConfigurationPages',
-    PackageInfo = 'PackageInfo',
-    Plugins = 'Plugins'
+    Packages = 'Packages',
+    Plugins = 'Plugins',
+    Repositories = 'Repositories'
 }

src/apps/dashboard/features/plugins/api/useConfigurationPages.ts

@@ -9,15 +9,10 @@ import { useApi } from 'hooks/useApi';
 import { QueryKey } from './queryKey';
 
 const fetchConfigurationPages = async (
-    api?: Api,
+    api: Api,
     params?: DashboardApiGetConfigurationPagesRequest,
     options?: AxiosRequestConfig
 ) => {
-    if (!api) {
-        console.warn('[fetchConfigurationPages] No API instance available');
-        return [];
-    }
-
     const response = await getDashboardApi(api)
         .getConfigurationPages(params, options);
     return response.data;
@@ -28,7 +23,7 @@ const getConfigurationPagesQuery = (
     params?: DashboardApiGetConfigurationPagesRequest
 ) => queryOptions({
     queryKey: [ QueryKey.ConfigurationPages, params?.enableInMainMenu ],
-    queryFn: ({ signal }) => fetchConfigurationPages(api, params, { signal }),
+    queryFn: ({ signal }) => fetchConfigurationPages(api!, params, { signal }),
     enabled: !!api
 });
 

src/apps/dashboard/features/plugins/api/useDisablePlugin.ts

@@ -11,7 +11,6 @@ export const useDisablePlugin = () => {
     const { api } = useApi();
     return useMutation({
         mutationFn: (params: PluginsApiDisablePluginRequest) => (
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             getPluginsApi(api!)
                 .disablePlugin(params)
         ),

src/apps/dashboard/features/plugins/api/useEnablePlugin.ts

@@ -11,7 +11,6 @@ export const useEnablePlugin = () => {
     const { api } = useApi();
     return useMutation({
         mutationFn: (params: PluginsApiEnablePluginRequest) => (
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             getPluginsApi(api!)
                 .enablePlugin(params)
         ),

src/apps/dashboard/features/plugins/api/useInstallPackage.ts

@@ -11,7 +11,6 @@ export const useInstallPackage = () => {
     const { api } = useApi();
     return useMutation({
         mutationFn: (params: PackageApiInstallPackageRequest) => (
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             getPackageApi(api!)
                 .installPackage(params)
         ),

src/apps/dashboard/features/plugins/api/usePackageInfo.ts

@@ -7,20 +7,22 @@ import type { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
 
 import { QueryKey } from './queryKey';
+import { queryClient } from 'utils/query/queryClient';
+import type { PackageInfo } from '@jellyfin/sdk/lib/generated-client/models/package-info';
 
 const fetchPackageInfo = async (
-    api?: Api,
-    params?: PackageApiGetPackageInfoRequest,
+    api: Api,
+    params: PackageApiGetPackageInfoRequest,
     options?: AxiosRequestConfig
 ) => {
-    if (!api) {
-        console.warn('[fetchPackageInfo] No API instance available');
-        return;
-    }
+    const packagesData = queryClient.getQueryData([ QueryKey.Packages ]) as PackageInfo[];
+    if (packagesData && params.assemblyGuid) {
+        // Use cached query to avoid re-fetching
+        const pkg = packagesData.find(v => v.guid === params.assemblyGuid);
 
-    if (!params) {
-        console.warn('[fetchPackageInfo] Missing request params');
-        return;
+        if (pkg) {
+            return pkg;
+        }
     }
 
     const response = await getPackageApi(api)
@@ -29,14 +31,14 @@ const fetchPackageInfo = async (
 };
 
 const getPackageInfoQuery = (
-    api?: Api,
+    api: Api | undefined,
     params?: PackageApiGetPackageInfoRequest
 ) => queryOptions({
     // Don't retry since requests for plugins not available in repos fail
     retry: false,
-    queryKey: [ QueryKey.PackageInfo, params?.name, params?.assemblyGuid ],
-    queryFn: ({ signal }) => fetchPackageInfo(api, params, { signal }),
-    enabled: !!api && !!params?.name
+    queryKey: [ QueryKey.Packages, params?.name, params?.assemblyGuid ],
+    queryFn: ({ signal }) => fetchPackageInfo(api!, params!, { signal }),
+    enabled: !!params && !!api && !!params.name
 });
 
 export const usePackageInfo = (

src/apps/dashboard/features/plugins/api/usePackages.ts

@@ -0,0 +1,32 @@
+import type { Api } from '@jellyfin/sdk';
+import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+import { QueryKey } from './queryKey';
+
+const fetchPackages = async (
+    api: Api,
+    options?: AxiosRequestConfig
+) => {
+    const response = await getPackageApi(api)
+        .getPackages(options);
+    return response.data;
+};
+
+const getPackagesQuery = (
+    api?: Api
+) => queryOptions({
+    queryKey: [ QueryKey.Packages ],
+    queryFn: ({ signal }) => fetchPackages(api!, { signal }),
+    enabled: !!api,
+    staleTime: 15 * 60 * 1000 // 15 minutes
+});
+
+export const usePackages = () => {
+    const { api } = useApi();
+    return useQuery(getPackagesQuery(api));
+};
+