Bump form-data from 4.0.2 to 4.0.4

---
updated-dependencies:
- dependency-name: form-data
  dependency-version: 4.0.4
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/CODEOWNERS

@@ -1,5 +1 @@
 *               @jellyfin/web
-# Joshua must review all changes to bump_version
-bump_version    @joshuaboniface
-# Core must approve all changes within the repo config
-.github/        @jellyfin/core

.github/workflows/__codeql.yml

@@ -20,21 +20,21 @@ jobs:
 
     steps:
       - name: Checkout repository ⬇️
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Initialize CodeQL 🛠️
-        uses: github/codeql-action/init@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
+        uses: github/codeql-action/init@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
         with:
           queries: security-and-quality
           languages: ${{ matrix.language }}
 
       - name: Autobuild 📦
-        uses: github/codeql-action/autobuild@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
+        uses: github/codeql-action/autobuild@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
 
       - name: Perform CodeQL Analysis 🧪
-        uses: github/codeql-action/analyze@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
+        uses: github/codeql-action/analyze@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/__package.yml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ inputs.commit || github.sha }}
 

.github/workflows/__quality_checks.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Scan
-        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
+        uses: actions/dependency-review-action@da24556b548a50705dd671f47852072ea4c105d9 # v4.7.1
         with:
           ## Workaround from https://github.com/actions/dependency-review-action/issues/456
           ## TODO: Remove when necessary
@@ -42,7 +42,7 @@ jobs:
 
     steps:
       - name: Checkout ⬇️
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ inputs.commit }}
           show-progress: false

.github/workflows/pull_request.yml

@@ -80,7 +80,7 @@ jobs:
     
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ github.event.pull_request.head.sha }}
     
@@ -95,6 +95,6 @@ jobs:
         run: npm ci --no-audit
     
       - name: Run eslint
-        uses: CatChen/eslint-suggestion-action@4ee415529307a8ca0260b4a3775484802523e5af # v4.1.19
+        uses: CatChen/eslint-suggestion-action@4dda35decf912ab18ea3e071acec2c6c2eda00b6 # v4.1.18
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTORS.md

@@ -101,8 +101,6 @@
 - [diegoeche](https://github.com/diegoeche)
 - [Free O'Toole](https://github.com/freeotoole)
 - [TheBosZ](https://github.com/thebosz)
-- [qm3jp](https://github.com/qm3jp)
-- [johnnyg](https://github.com/johnnyg)
 
 ## Emby Contributors
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellyfin-web",
-  "version": "10.12.0",
+  "version": "10.11.0",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
@@ -18,8 +18,8 @@
     "@types/loadable__component": "5.13.9",
     "@types/lodash-es": "4.17.12",
     "@types/markdown-it": "14.1.2",
-    "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.3",
+    "@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/parser": "8.35.1",
@@ -66,7 +66,6 @@
     "ts-loader": "9.5.2",
     "typescript": "5.8.3",
     "typescript-eslint": "8.35.1",
-    "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack": "5.99.9",
     "webpack-bundle-analyzer": "4.10.2",
@@ -85,7 +84,7 @@
     "@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.202512091852",
+    "@jellyfin/sdk": "0.0.0-unstable.202507090504",
     "@jellyfin/ux-web": "1.0.0",
     "@mui/icons-material": "6.4.12",
     "@mui/material": "6.4.12",
@@ -107,7 +106,7 @@
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
-    "hls.js": "1.6.13",
+    "hls.js": "1.6.5",
     "intersection-observer": "0.12.2",
     "jellyfin-apiclient": "1.11.0",
     "jquery": "3.7.1",
@@ -121,11 +120,11 @@
     "native-promise-only": "0.8.1",
     "pdfjs-dist": "3.11.174",
     "proxy-polyfill": "0.3.2",
-    "react": "19.2.3",
+    "react": "18.3.1",
     "react-blurhash": "0.3.0",
-    "react-dom": "19.2.3",
+    "react-dom": "18.3.1",
     "react-lazy-load-image-component": "1.6.3",
-    "react-router-dom": "7.11.0",
+    "react-router-dom": "6.30.1",
     "resize-observer-polyfill": "1.5.1",
     "screenfull": "6.0.2",
     "sortablejs": "1.15.6",
@@ -162,14 +161,14 @@
     "build:check": "tsc --noEmit",
     "build:es-check": "npm run build:production && npm run escheck",
     "escheck": "es-check",
-    "lint": "eslint",
+    "lint": "eslint \"./\"",
     "test": "vitest --watch=false --config vite.config.ts",
     "test:watch": "vitest --config vite.config.ts",
     "stylelint": "stylelint \"src/**/*.{css,scss}\""
   },
   "engines": {
     "node": ">=20.0.0",
-    "npm": ">=9.6.4 <11.0.0",
+    "npm": ">=9.6.4",
     "yarn": "YARN NO LONGER USED - use npm instead."
   }
 }

src/RootAppRouter.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@mui/material/styles';
+
 import React from 'react';
 import {
     RouterProvider,
@@ -13,16 +13,12 @@ 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 { SETTING_KEY as LAYOUT_SETTING_KEY } from 'components/layoutManager';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import { LayoutMode } from 'constants/layoutMode';
-import browser from 'scripts/browser';
-import appTheme from 'themes';
-import { ThemeStorageManager } from 'themes/themeStorageManager';
+import UserThemeProvider from 'themes/UserThemeProvider';
 
-const layoutMode = browser.tv ? LayoutMode.Tv : localStorage.getItem(LAYOUT_SETTING_KEY);
-const isExperimentalLayout = !layoutMode || layoutMode === LayoutMode.Experimental;
+const layoutMode = localStorage.getItem('layout');
+const isExperimentalLayout = layoutMode === 'experimental';
 
 const router = createHashRouter([
     {
@@ -55,15 +51,11 @@ function RootAppLayout() {
         .some(path => location.pathname.startsWith(`/${path}`));
 
     return (
-        <ThemeProvider
-            theme={appTheme}
-            defaultMode='dark'
-            storageManager={ThemeStorageManager}
-        >
+        <UserThemeProvider>
             <Backdrop />
             <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
 
             <Outlet />
-        </ThemeProvider>
+        </UserThemeProvider>
     );
 }

src/apiclient.d.ts

@@ -136,7 +136,6 @@ declare module 'jellyfin-apiclient' {
         getInstantMixFromItem(itemId: string, options?: any): Promise<BaseItemDtoQueryResult>;
         getIntros(itemId: string): Promise<BaseItemDtoQueryResult>;
         getItemCounts(userId?: string): Promise<ItemCounts>;
-        /** @deprecated This function returns a URL with a legacy auth parameter.*/
         getItemDownloadUrl(itemId: string): string;
         getItemImageInfos(itemId: string): Promise<ImageInfo[]>;
         getItems(userId: string, options?: any): Promise<BaseItemDtoQueryResult>;

src/apps/dashboard/components/AppTabs.tsx

@@ -7,7 +7,7 @@ import isEqual from 'lodash-es/isEqual';
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { EventType } from 'constants/eventType';
+import { EventType } from 'types/eventType';
 import Events, { type Event } from 'utils/events';
 
 interface AppTabsParams {

src/apps/dashboard/components/BaseCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
 import CardMedia from '@mui/material/CardMedia';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -11,8 +11,9 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
 import { Link, To } from 'react-router-dom';
 
-interface BaseCardProps {
+interface IProps {
     title?: string;
+    secondaryTitle?: string;
     text?: string;
     image?: string | null;
     icon?: React.ReactNode;
@@ -21,30 +22,15 @@ interface BaseCardProps {
     action?: boolean;
     actionRef?: React.MutableRefObject<HTMLButtonElement | null>;
     onActionClick?: () => void;
-    height?: number;
-    width?: number;
 };
 
-const BaseCard = ({
-    title,
-    text,
-    image,
-    icon,
-    to,
-    onClick,
-    action,
-    actionRef,
-    onActionClick,
-    height,
-    width
-}: BaseCardProps) => {
+const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, action, actionRef, onActionClick }: IProps) => {
     return (
         <Card
             sx={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: height || 240,
-                width: width
+                height: 240
             }}
         >
             <CardActionArea
@@ -76,44 +62,30 @@ const BaseCard = ({
                     </Box>
                 )}
             </CardActionArea>
-            <CardContent
-                sx={{
-                    minHeight: 50,
-                    '&:last-child': {
-                        paddingBottom: 2,
-                        paddingRight: 1
-                    }
-                }}>
-                <Stack flexGrow={1} direction='row'>
-                    <Stack flexGrow={1}>
-                        <Typography gutterBottom sx={{
+            <CardHeader
+                title={
+                    <Stack direction='row' gap={1} alignItems='center'>
+                        <Typography sx={{
                             overflow: 'hidden',
                             whiteSpace: 'nowrap',
                             textOverflow: 'ellipsis'
                         }}>
                             {title}
                         </Typography>
-                        {text && (
-                            <Typography
-                                variant='body2'
-                                color='text.secondary'
-                                sx={{
-                                    lineBreak: 'anywhere'
-                                }}
-                            >
-                                {text}
-                            </Typography>
+                        {secondaryTitle && (
+                            <Typography variant='body2' color='text.secondary'>{secondaryTitle}</Typography>
                         )}
                     </Stack>
-                    <Box>
-                        {action ? (
-                            <IconButton ref={actionRef} onClick={onActionClick}>
-                                <MoreVertIcon />
-                            </IconButton>
-                        ) : null}
-                    </Box>
-                </Stack>
-            </CardContent>
+                }
+                subheader={text}
+                action={
+                    action ? (
+                        <IconButton ref={actionRef} onClick={onActionClick}>
+                            <MoreVertIcon />
+                        </IconButton>
+                    ) : null
+                }
+            />
         </Card>
     );
 };

src/apps/dashboard/components/SearchInput.tsx

@@ -1,70 +0,0 @@
-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/Toast.tsx

@@ -1,30 +0,0 @@
-import React, { useCallback } from 'react';
-import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-
-const Toast = (props: SnackbarProps) => {
-    const onCloseClick = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        props.onClose?.(e, 'clickaway');
-    }, [ props ]);
-
-    const action = (
-        <IconButton
-            size='small'
-            color='inherit'
-            onClick={onCloseClick}
-        >
-            <CloseIcon fontSize='small' />
-        </IconButton>
-    );
-
-    return (
-        <Snackbar
-            autoHideDuration={3300}
-            action={action}
-            { ...props }
-        />
-    );
-};
-
-export default Toast;

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

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

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

@@ -1,8 +1,7 @@
 import Box from '@mui/material/Box/Box';
 import Stack from '@mui/material/Stack/Stack';
-import type {} from '@mui/material/themeCssVarsAugmentation';
 import Typography from '@mui/material/Typography/Typography';
-import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions, MaterialReactTable } from 'material-react-table';
+import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
 import React from 'react';
 
 import Page, { type PageProps } from 'components/Page';
@@ -13,7 +12,7 @@ interface TablePageProps<T extends MRT_RowData> extends PageProps {
     table: MRT_TableInstance<T>
 }
 
-export const DEFAULT_TABLE_OPTIONS: Partial<MRT_TableOptions<MRT_RowData>> = {
+export const DEFAULT_TABLE_OPTIONS = {
     // Enable custom features
     enableColumnPinning: true,
     enableColumnResizing: true,

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

@@ -39,7 +39,6 @@ const ActivityLogWidget = () => {
                             key={entry.Id}
                             item={entry}
                             displayShortOverview={true}
-                            to='/dashboard/activity?useractivity=true'
                         />
                     ))}
                 </List>

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

@@ -31,7 +31,6 @@ const AlertsLogWidget = () => {
                         key={entry.Id}
                         item={entry}
                         displayShortOverview={false}
-                        to='/dashboard/activity?useractivity=false'
                     />
                 ))}
             </List>

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

@@ -5,14 +5,13 @@ 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/Grid';
+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';
-import Box from '@mui/material/Box';
 
 interface MetricDefinition {
     key: keyof ItemCounts
@@ -76,27 +75,23 @@ const ItemCountsWidget = () => {
     }, [ counts, isPending ]);
 
     return (
-        <Box>
-            <Grid
-                container
-                spacing={2}
-                sx={{
-                    alignItems: 'stretch'
-                }}
-            >
-                {cards.map(card => (
-                    <Grid
-                        key={card.metrics.map(metric => metric.label).join('-')}
-                        item
-                        xs={12}
-                        sm={6}
-                        lg={4}
-                    >
-                        <MetricCard {...card} />
-                    </Grid>
-                ))}
-            </Grid>
-        </Box>
+        <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>
     );
 };
 

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

@@ -6,24 +6,15 @@ 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;
-    isScanning?: boolean;
 };
 
-const ServerInfoWidget = ({
-    onScanLibrariesClick,
-    onRestartClick,
-    onShutdownClick,
-    isScanning
-}: ServerInfoWidgetProps) => {
+const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClick }: ServerInfoWidgetProps) => {
     const { data: systemInfo, isPending } = useSystemInfo();
 
     return (
@@ -36,13 +27,13 @@ const ServerInfoWidget = ({
                     padding: 2
                 }}>
                     <Stack direction='row'>
-                        <Stack flexGrow={1} spacing={1}>
+                        <Stack flexGrow={1} gap={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}>
+                        <Stack flexGrow={5} gap={1}>
                             {isPending ? (
                                 <>
                                     <Skeleton />
@@ -62,21 +53,18 @@ const ServerInfoWidget = ({
                     </Stack>
                 </Paper>
 
-                <Stack direction='row' spacing={1.5}>
+                <Stack direction='row' gap={1.5} flexWrap={'wrap'}>
                     <Button
                         onClick={onScanLibrariesClick}
-                        startIcon={<RefreshIcon />}
                         sx={{
                             fontWeight: 'bold'
                         }}
-                        disabled={isScanning}
                     >
                         {globalize.translate('ButtonScanAllLibraries')}
                     </Button>
 
                     <Button
                         onClick={onRestartClick}
-                        startIcon={<RestartAltIcon />}
                         color='error'
                         sx={{
                             fontWeight: 'bold'
@@ -87,7 +75,6 @@ const ServerInfoWidget = ({
 
                     <Button
                         onClick={onShutdownClick}
-                        startIcon={<PowerSettingsNewIcon />}
                         color='error'
                         sx={{
                             fontWeight: 'bold'

src/apps/dashboard/constants/helpLinks.ts

@@ -22,7 +22,10 @@ export const HelpLinks = [
         paths: ['/dashboard/playback/transcoding'],
         url: 'https://jellyfin.org/docs/general/server/transcoding'
     }, {
-        paths: ['/dashboard/plugins'],
+        paths: [
+            '/dashboard/plugins',
+            '/dashboard/plugins/catalog'
+        ],
         url: 'https://jellyfin.org/docs/general/server/plugins/'
     }, {
         paths: ['/dashboard/plugins/repositories'],
@@ -47,8 +50,5 @@ export const HelpLinks = [
             '/dashboard/users/profile'
         ],
         url: 'https://jellyfin.org/docs/general/server/users/'
-    }, {
-        paths: ['/dashboard/backups'],
-        url: 'https://jellyfin.org/docs/general/administration/backup-and-restore/'
     }
 ];

src/apps/dashboard/controllers/library.html

@@ -0,0 +1,14 @@
+<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage librarySectionPage fullWidthContent" data-title="${HeaderLibraries}">
+    <div>
+        <div class="content-primary">
+            <div class="padded-top padded-bottom">
+                <button is="emby-button" type="button" class="raised btnRefresh">
+                    <span>${ButtonScanAllLibraries}</span>
+                </button>
+                <progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
+            </div>
+
+            <div id="divVirtualFolders"></div>
+        </div>
+    </div>
+</div>

src/apps/dashboard/controllers/library.js

@@ -0,0 +1,383 @@
+import escapeHtml from 'escape-html';
+
+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 { 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 }) => {
+        new MediaLibraryCreator({
+            collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
+                return !f.hidden;
+            }),
+            refresh: shouldRefreshLibraryAfterChanges(page)
+        }).then(function (hasChanges) {
+            if (hasChanges) {
+                reloadLibrary(page);
+            }
+        });
+    });
+}
+
+function editVirtualFolder(page, virtualFolder) {
+    import('components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
+        new MediaLibraryEditor({
+            refresh: shouldRefreshLibraryAfterChanges(page),
+            library: virtualFolder
+        }).then(function (hasChanges) {
+            if (hasChanges) {
+                reloadLibrary(page);
+            }
+        });
+    });
+}
+
+function deleteVirtualFolder(page, virtualFolder) {
+    let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
+
+    if (virtualFolder.Locations.length) {
+        msg += '<br/><br/>' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '<br/><br/>';
+        msg += virtualFolder.Locations.join('<br/>');
+    }
+
+    confirm({
+        text: msg,
+        title: globalize.translate('HeaderRemoveMediaFolder'),
+        confirmText: globalize.translate('Delete'),
+        primary: 'delete'
+    }).then(function () {
+        const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+        ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {
+            reloadLibrary(page);
+        });
+    });
+}
+
+function refreshVirtualFolder(page, virtualFolder) {
+    import('components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
+        new RefreshDialog({
+            itemIds: [virtualFolder.ItemId],
+            serverId: ApiClient.serverId(),
+            mode: 'scan'
+        }).show();
+    });
+}
+
+function renameVirtualFolder(page, virtualFolder) {
+    import('components/prompt/prompt').then(({ default: prompt }) => {
+        prompt({
+            label: globalize.translate('LabelNewName'),
+            description: globalize.translate('MessageRenameMediaFolder'),
+            confirmText: globalize.translate('ButtonRename')
+        }).then(function (newName) {
+            if (newName && newName != virtualFolder.Name) {
+                const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+                ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () {
+                    reloadLibrary(page);
+                });
+            }
+        });
+    });
+}
+
+function showCardMenu(page, elem, virtualFolders) {
+    const card = dom.parentWithClass(elem, 'card');
+    const index = parseInt(card.getAttribute('data-index'), 10);
+    const virtualFolder = virtualFolders[index];
+    const menuItems = [];
+    menuItems.push({
+        name: globalize.translate('EditImages'),
+        id: 'editimages',
+        icon: 'photo'
+    });
+    menuItems.push({
+        name: globalize.translate('ManageLibrary'),
+        id: 'edit',
+        icon: 'folder'
+    });
+    menuItems.push({
+        name: globalize.translate('ButtonRename'),
+        id: 'rename',
+        icon: 'mode_edit'
+    });
+    menuItems.push({
+        name: globalize.translate('ScanLibrary'),
+        id: 'refresh',
+        icon: 'refresh'
+    });
+    menuItems.push({
+        name: globalize.translate('ButtonRemove'),
+        id: 'delete',
+        icon: 'delete'
+    });
+
+    import('components/actionSheet/actionSheet').then((actionsheet) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: elem,
+            callback: function (resultId) {
+                switch (resultId) {
+                    case 'edit':
+                        editVirtualFolder(page, virtualFolder);
+                        break;
+
+                    case 'editimages':
+                        editImages(page, virtualFolder);
+                        break;
+
+                    case 'rename':
+                        renameVirtualFolder(page, virtualFolder);
+                        break;
+
+                    case 'delete':
+                        deleteVirtualFolder(page, virtualFolder);
+                        break;
+
+                    case 'refresh':
+                        refreshVirtualFolder(page, virtualFolder);
+                }
+            }
+        });
+    });
+}
+
+function reloadLibrary(page) {
+    loading.show();
+    ApiClient.getVirtualFolders().then(function (result) {
+        reloadVirtualFolders(page, result);
+    });
+}
+
+function shouldRefreshLibraryAfterChanges(page) {
+    return page.id === 'mediaLibraryPage';
+}
+
+function reloadVirtualFolders(page, virtualFolders) {
+    let html = '';
+    virtualFolders.push({
+        Name: globalize.translate('ButtonAddMediaLibrary'),
+        icon: 'add_circle',
+        Locations: [],
+        showType: false,
+        showLocations: false,
+        showMenu: false,
+        showNameWithIcon: false,
+        elementId: 'addLibrary'
+    });
+
+    for (let i = 0; i < virtualFolders.length; i++) {
+        const virtualFolder = virtualFolders[i];
+        html += getVirtualFolderHtml(page, virtualFolder, i);
+    }
+
+    const divVirtualFolders = page.querySelector('#divVirtualFolders');
+    divVirtualFolders.innerHTML = html;
+    divVirtualFolders.classList.add('itemsContainer');
+    divVirtualFolders.classList.add('vertical-wrap');
+    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);
+    });
+
+    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) => {
+        imageEditor.show({
+            itemId: virtualFolder.ItemId,
+            serverId: ApiClient.serverId()
+        }).then(function () {
+            reloadLibrary(page);
+        });
+    });
+}
+
+function getLink(text, url) {
+    return globalize.translate(text, '<a is="emby-linkbutton" class="button-link" href="' + url + '" target="_blank" data-autohide="true">', '</a>');
+}
+
+function getCollectionTypeOptions() {
+    return [{
+        name: '',
+        value: ''
+    }, {
+        name: globalize.translate('Movies'),
+        value: 'movies',
+        message: getLink('MovieLibraryHelp', 'https://jellyfin.org/docs/general/server/media/movies')
+    }, {
+        name: globalize.translate('TabMusic'),
+        value: 'music',
+        message: getLink('MusicLibraryHelp', 'https://jellyfin.org/docs/general/server/media/music')
+    }, {
+        name: globalize.translate('Shows'),
+        value: 'tvshows',
+        message: getLink('TvLibraryHelp', 'https://jellyfin.org/docs/general/server/media/shows')
+    }, {
+        name: globalize.translate('Books'),
+        value: 'books',
+        message: getLink('BookLibraryHelp', 'https://jellyfin.org/docs/general/server/media/books')
+    }, {
+        name: globalize.translate('HomeVideosPhotos'),
+        value: 'homevideos'
+    }, {
+        name: globalize.translate('MusicVideos'),
+        value: 'musicvideos'
+    }, {
+        name: globalize.translate('MixedMoviesShows'),
+        value: 'mixed',
+        message: globalize.translate('MessageUnsetContentHelp')
+    }];
+}
+
+function getVirtualFolderHtml(page, virtualFolder, index) {
+    let html = '';
+
+    const elementId = virtualFolder.elementId ? `id="${virtualFolder.elementId}" ` : '';
+    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">';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<div class="cardContent">';
+    let imgUrl = '';
+
+    if (virtualFolder.PrimaryImageItemId) {
+        imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
+            maxWidth: Math.round(dom.getScreenWidth() * 0.40),
+            type: 'Primary'
+        });
+    }
+
+    let hasCardImageContainer;
+
+    if (imgUrl) {
+        html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : getDefaultBackgroundClass()}" style="cursor:pointer">`;
+        html += `<img src="${imgUrl}" style="width:100%" />`;
+        hasCardImageContainer = true;
+    } else if (!virtualFolder.showNameWithIcon) {
+        html += `<div class="cardImageContainer editLibrary ${getDefaultBackgroundClass()}" style="cursor:pointer;">`;
+        html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '" aria-hidden="true"></span>';
+        hasCardImageContainer = true;
+    }
+
+    if (hasCardImageContainer) {
+        html += '<div class="cardIndicators backdropCardIndicators">';
+        html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && virtualFolder.RefreshStatus !== 'Idle' ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
+        html += '</div>';
+        html += '</div>';
+    }
+
+    if (!imgUrl && virtualFolder.showNameWithIcon) {
+        html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
+        html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '" aria-hidden="true"></span>';
+
+        if (virtualFolder.showNameWithIcon) {
+            html += '<div style="margin:1em 0;position:width:100%;">';
+            html += escapeHtml(virtualFolder.Name);
+            html += '</div>';
+        }
+
+        html += '</h3>';
+    }
+
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
+
+    if (virtualFolder.showMenu !== false) {
+        const dirTextAlign = globalize.getIsRTL() ? 'left' : 'right';
+        html += '<div style="text-align:' + dirTextAlign + '; float:' + dirTextAlign + ';padding-top:5px;">';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
+        html += '</div>';
+    }
+
+    html += "<div class='cardText'>";
+
+    if (virtualFolder.showNameWithIcon) {
+        html += '&nbsp;';
+    } else {
+        html += escapeHtml(virtualFolder.Name);
+    }
+
+    html += '</div>';
+    let typeName = getCollectionTypeOptions().filter(function (t) {
+        return t.value == virtualFolder.CollectionType;
+    })[0];
+    typeName = typeName ? typeName.name : globalize.translate('Other');
+    html += "<div class='cardText cardText-secondary'>";
+
+    if (virtualFolder.showType === false) {
+        html += '&nbsp;';
+    } else {
+        html += typeName;
+    }
+
+    html += '</div>';
+
+    if (virtualFolder.showLocations === false) {
+        html += "<div class='cardText cardText-secondary'>";
+        html += '&nbsp;';
+        html += '</div>';
+    } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
+        html += "<div class='cardText cardText-secondary' dir='ltr' style='text-align:left;'>";
+        html += virtualFolder.Locations[0];
+        html += '</div>';
+    } else {
+        html += "<div class='cardText cardText-secondary'>";
+        html += globalize.translate('NumLocationsValue', virtualFolder.Locations.length);
+        html += '</div>';
+    }
+
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+pageClassOn('pageshow', 'mediaLibraryPage', function () {
+    reloadLibrary(this);
+});
+pageIdOn('pageshow', 'mediaLibraryPage', function () {
+    const page = this;
+    taskButton({
+        mode: 'on',
+        progressElem: page.querySelector('.refreshProgress'),
+        taskKey: 'RefreshLibrary',
+        button: page.querySelector('.btnRefresh')
+    });
+});
+pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
+    const page = this;
+    taskButton({
+        mode: 'off',
+        progressElem: page.querySelector('.refreshProgress'),
+        taskKey: 'RefreshLibrary',
+        button: page.querySelector('.btnRefresh')
+    });
+});
+

src/apps/dashboard/controllers/livetvstatus.html

@@ -0,0 +1,40 @@
+<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage" data-title="${LiveTV}">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection verticalSection-extrabottompadding">
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <div class="sectionTitleContainer sectionTitleContainer-cards">
+                        <h2 class="sectionTitle sectionTitle-cards">
+                            <span>${HeaderTunerDevices}</span>
+                        </h2>
+                        <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add" aria-hidden="true"></span>
+                        </button>
+                    </div>
+                    <div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
+                </div>
+            </div>
+
+            <div class="readOnlyContent">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer">
+                        <h2 class="sectionTitle">${HeaderGuideProviders}</h2>
+                        <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add" aria-hidden="true"></span>
+                        </button>
+                    </div>
+
+                    <div class="providerList">
+                    </div>
+
+                    <div>
+                        <button is="emby-button" type="button" class="raised btnRefresh block button-cancel">
+                            <span>${ButtonRefreshGuideData}</span>
+                        </button>
+                        <progress max="100" min="0" style="width: 100%;" class="refreshGuideProgress"></progress>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/apps/dashboard/controllers/livetvstatus.js

@@ -0,0 +1,338 @@
+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 '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';
+
+const enableFocusTransform = !browser.slow && !browser.edge;
+
+function getDeviceHtml(device) {
+    const padderClass = 'cardPadder-backdrop';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
+    const cardBoxCssClass = 'cardBox visualCardBox';
+    let html = '';
+
+    // TODO move card creation code to Card component
+
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
+
+        if (enableFocusTransform) {
+            cssClass += ' show-animation';
+        }
+    }
+
+    html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
+    html += '<div class="' + cardBoxCssClass + '">';
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
+    html += '<div class="' + padderClass + '"></div>';
+    html += '<div class="cardContent searchImage">';
+    html += `<div class="cardImageContainer coveredImage ${getDefaultBackgroundClass()}"><span class="cardImageIcon material-icons dvr" aria-hidden="true"></span></div>`;
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">';
+    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
+    html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
+    html += '<div class="cardText cardText-secondary">';
+    html += device.Url || '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+function renderDevices(page, devices) {
+    page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
+}
+
+function deleteDevice(page, id) {
+    const message = globalize.translate('MessageConfirmDeleteTunerDevice');
+
+    confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
+        loading.show();
+        ApiClient.ajax({
+            type: 'DELETE',
+            url: ApiClient.getUrl('LiveTv/TunerHosts', {
+                Id: id
+            })
+        }).then(function () {
+            reload(page);
+        });
+    });
+}
+
+function reload(page) {
+    loading.show();
+    ApiClient.getNamedConfiguration('livetv').then(function (config) {
+        renderDevices(page, config.TunerHosts);
+        renderProviders(page, config.ListingProviders);
+    });
+    loading.hide();
+}
+
+function submitAddDeviceForm(page) {
+    page.querySelector('.dlgAddDevice').close();
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('LiveTv/TunerHosts'),
+        data: JSON.stringify({
+            Type: page.querySelector('#selectTunerDeviceType').value,
+            Url: page.querySelector('#txtDevicePath').value
+        }),
+        contentType: 'application/json'
+    }).then(function () {
+        reload(page);
+    }, function () {
+        Dashboard.alert({
+            message: globalize.translate('ErrorAddingTunerDevice')
+        });
+    });
+}
+
+function renderProviders(page, providers) {
+    let html = '';
+
+    if (providers.length) {
+        html += '<div class="paperList">';
+
+        for (let i = 0, length = providers.length; i < length; i++) {
+            const provider = providers[i];
+            html += '<div class="listItem">';
+            html += '<span class="listItemIcon material-icons dvr" aria-hidden="true"></span>';
+            html += '<div class="listItemBody two-line">';
+            html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
+            html += '<h3 class="listItemBodyText">';
+            html += getProviderName(provider.Type);
+            html += '</h3>';
+            html += '<div class="listItemBodyText secondary">';
+            html += provider.Path || provider.ListingsId || '';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert" aria-hidden="true"></span></button>';
+            html += '</div>';
+        }
+
+        html += '</div>';
+    }
+
+    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) {
+    const items = [];
+    items.push({
+        name: globalize.translate('Delete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('MapChannels'),
+        id: 'map'
+    });
+
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+        }).then(function (id) {
+            switch (id) {
+                case 'delete':
+                    deleteProvider(page, providerId);
+                    break;
+
+                case 'map':
+                    mapChannels(page, providerId);
+            }
+        });
+    });
+}
+
+function mapChannels(page, providerId) {
+    import('components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
+        new ChannelMapper({
+            serverId: ApiClient.serverInfo().Id,
+            providerId: providerId
+        }).show();
+    });
+}
+
+function deleteProvider(page, id) {
+    const message = globalize.translate('MessageConfirmDeleteGuideProvider');
+
+    confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
+        loading.show();
+        ApiClient.ajax({
+            type: 'DELETE',
+            url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                Id: id
+            })
+        }).then(function () {
+            reload(page);
+        }, function () {
+            reload(page);
+        });
+    });
+}
+
+function getTunerName(providerId) {
+    switch (providerId.toLowerCase()) {
+        case 'm3u':
+            return 'M3U';
+        case 'hdhomerun':
+            return 'HDHomeRun';
+        case 'hauppauge':
+            return 'Hauppauge';
+        case 'satip':
+            return 'DVB';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderName(providerId) {
+    switch (providerId.toLowerCase()) {
+        case 'schedulesdirect':
+            return 'Schedules Direct';
+        case 'xmltv':
+            return 'XMLTV';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderConfigurationUrl(providerId) {
+    switch (providerId.toLowerCase()) {
+        case 'xmltv':
+            return '#/dashboard/livetv/guide?type=xmltv';
+        case 'schedulesdirect':
+            return '#/dashboard/livetv/guide?type=schedulesdirect';
+    }
+}
+
+function addProvider(button) {
+    const menuItems = [];
+    menuItems.push({
+        name: 'Schedules Direct',
+        id: 'SchedulesDirect'
+    });
+    menuItems.push({
+        name: 'XMLTV',
+        id: 'xmltv'
+    });
+
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: button,
+            callback: function (id) {
+                Dashboard.navigate(getProviderConfigurationUrl(id));
+            }
+        });
+    });
+}
+
+function addDevice() {
+    Dashboard.navigate('dashboard/livetv/tuner');
+}
+
+function showDeviceMenu(button, tunerDeviceId) {
+    const items = [];
+    items.push({
+        name: globalize.translate('Delete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('Edit'),
+        id: 'edit'
+    });
+
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+        }).then(function (id) {
+            switch (id) {
+                case 'delete':
+                    deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
+                    break;
+
+                case 'edit':
+                    Dashboard.navigate('dashboard/livetv/tuner?id=' + tunerDeviceId);
+            }
+        });
+    });
+}
+
+function onDevicesListClick(e) {
+    const card = dom.parentWithClass(e.target, 'card');
+
+    if (card) {
+        const id = card.getAttribute('data-id');
+        const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
+
+        if (btnCardOptions) {
+            showDeviceMenu(btnCardOptions, id);
+        } else {
+            Dashboard.navigate('dashboard/livetv/tuner?id=' + id);
+        }
+    }
+}
+
+$(document).on('pageinit', '#liveTvStatusPage', function () {
+    const page = this;
+    page.querySelector('.btnAddDevice').addEventListener('click', function () {
+        addDevice();
+    });
+    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);
+}).on('pageshow', '#liveTvStatusPage', function () {
+    const page = this;
+    reload(page);
+    taskButton({
+        mode: 'on',
+        progressElem: page.querySelector('.refreshGuideProgress'),
+        taskKey: 'RefreshGuide',
+        button: page.querySelector('.btnRefresh')
+    });
+}).on('pagehide', '#liveTvStatusPage', function () {
+    const page = this;
+    taskButton({
+        mode: 'off',
+        progressElem: page.querySelector('.refreshGuideProgress'),
+        taskKey: 'RefreshGuide',
+        button: page.querySelector('.btnRefresh')
+    });
+});

src/apps/dashboard/controllers/livetvtuner.js

@@ -1,6 +1,6 @@
 import globalize from 'lib/globalize';
 import loading from 'components/loading/loading';
-import dom from 'utils/dom';
+import dom from 'scripts/dom';
 import 'elements/emby-input/emby-input';
 import 'elements/emby-button/emby-button';
 import 'elements/emby-checkbox/emby-checkbox';

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

@@ -4,6 +4,7 @@ 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';
@@ -11,15 +12,13 @@ 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';
-import ListItemLink from 'components/ListItemLink';
 
 type ActivityListItemProps = {
     item: ActivityLogEntry;
     displayShortOverview: boolean;
-    to: string;
 };
 
-const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemProps) => {
+const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps) => {
     const relativeDate = useMemo(() => {
         if (item.Date) {
             return formatRelative(Date.parse(item.Date), Date.now(), { locale: getLocale() });
@@ -30,7 +29,7 @@ const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemPr
 
     return (
         <ListItem disablePadding>
-            <ListItemLink to={to}>
+            <ListItemButton>
                 <ListItemAvatar>
                     <Avatar sx={{ bgcolor: getLogLevelColor(item.Severity || LogLevel.Information) + '.main' }}>
                         <Notifications sx={{ color: '#fff' }} />
@@ -38,28 +37,14 @@ const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemPr
                 </ListItemAvatar>
 
                 <ListItemText
-                    primary={<Typography sx={{ whiteSpace: 'pre-wrap' }}>{item.Name}</Typography>}
+                    primary={<Typography>{item.Name}</Typography>}
                     secondary={(
                         <Stack>
-                            <Typography
-                                sx={{
-                                    textOverflow: 'ellipsis',
-                                    overflow: 'hidden'
-                                }}
-                                variant='body1'
-                                color='text.secondary'
-                            >
+                            <Typography variant='body1' color='text.secondary'>
                                 {relativeDate}
                             </Typography>
                             {displayShortOverview && (
-                                <Typography
-                                    sx={{
-                                        textOverflow: 'ellipsis',
-                                        overflow: 'hidden'
-                                    }}
-                                    variant='body1'
-                                    color='text.secondary'
-                                >
+                                <Typography variant='body1' color='text.secondary'>
                                     {item.ShortOverview}
                                 </Typography>
                             )}
@@ -67,7 +52,7 @@ const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemPr
                     )}
                     disableTypography
                 />
-            </ListItemLink>
+            </ListItemButton>
         </ListItem>
     );
 };

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

@@ -7,7 +7,7 @@ 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, useState } from 'react';
+import React, { FunctionComponent, useCallback } from 'react';
 import Stack from '@mui/material/Stack';
 import FormGroup from '@mui/material/FormGroup';
 import FormControl from '@mui/material/FormControl';
@@ -16,7 +16,7 @@ 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 'apps/dashboard/components/Toast';
+import toast from 'components/toast/toast';
 
 type IProps = {
     backup: BackupManifestDto;
@@ -25,16 +25,10 @@ type IProps = {
 };
 
 const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }: IProps) => {
-    const [ isCopiedToastOpen, setIsCopiedToastOpen ] = useState(false);
-
-    const handleToastClose = useCallback(() => {
-        setIsCopiedToastOpen(false);
-    }, []);
-
     const copyPath = useCallback(async () => {
         if (backup.Path) {
             await copy(backup.Path);
-            setIsCopiedToastOpen(true);
+            toast({ text: globalize.translate('Copied') });
         }
     }, [ backup.Path ]);
 
@@ -45,21 +39,16 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
             maxWidth={'sm'}
             fullWidth
         >
-            <Toast
-                open={isCopiedToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('Copied')}
-            />
             <DialogTitle>
                 {backup.DateCreated}
             </DialogTitle>
 
             <DialogContent>
-                <Stack spacing={2}>
+                <Stack gap={2}>
                     <Box>
                         <Stack
                             direction='row'
-                            spacing={2}
+                            gap={2}
                         >
                             <Typography fontWeight='bold'>{globalize.translate('LabelPath')}</Typography>
                             <Stack direction='row'>
@@ -71,7 +60,7 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
                         </Stack>
                         <Stack
                             direction='row'
-                            spacing={2}
+                            gap={2}
                         >
                             <Typography fontWeight='bold'>{globalize.translate('LabelVersion')}</Typography>
                             <Typography color='text.secondary'>{backup.ServerVersion}</Typography>

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

@@ -32,7 +32,7 @@ const RestoreConfirmationDialog: FunctionComponent<IProps> = ({ open, onClose, o
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={onClose} variant='text'>
+                <Button onClick={onClose} color='error'>
                     {globalize.translate('ButtonCancel')}
                 </Button>
                 <Button onClick={onConfirm}>

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

@@ -1,21 +0,0 @@
-import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
-import { LibraryStructureApiRemoveVirtualFolderRequest } from '@jellyfin/sdk/lib/generated-client/api/library-structure-api';
-import { useMutation } from '@tanstack/react-query';
-
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-
-export const useRemoveVirtualFolder = () => {
-    const { api } = useApi();
-    return useMutation({
-        mutationFn: (params: LibraryStructureApiRemoveVirtualFolderRequest) => (
-            getLibraryStructureApi(api!)
-                .removeVirtualFolder(params)
-        ),
-        onSuccess: () => {
-            void queryClient.invalidateQueries({
-                queryKey: [ 'VirtualFolders' ]
-            });
-        }
-    });
-};

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

@@ -1,21 +0,0 @@
-import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
-import { LibraryStructureApiRenameVirtualFolderRequest } from '@jellyfin/sdk/lib/generated-client/api/library-structure-api';
-import { useMutation } from '@tanstack/react-query';
-
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-
-export const useRenameVirtualFolder = () => {
-    const { api } = useApi();
-    return useMutation({
-        mutationFn: (params: LibraryStructureApiRenameVirtualFolderRequest) => (
-            getLibraryStructureApi(api!)
-                .renameVirtualFolder(params)
-        ),
-        onSuccess: () => {
-            void queryClient.invalidateQueries({
-                queryKey: [ 'VirtualFolders' ]
-            });
-        }
-    });
-};

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

@@ -1,21 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import type { AxiosRequestConfig } from 'axios';
-import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
-
-const fetchVirtualFolders = async (api: Api, options?: AxiosRequestConfig) => {
-    const response = await getLibraryStructureApi(api).getVirtualFolders(options);
-
-    return response.data;
-};
-
-export const useVirtualFolders = () => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: [ 'VirtualFolders' ],
-        queryFn: ({ signal }) => fetchVirtualFolders(api!, { signal }),
-        enabled: !!api
-    });
-};

src/apps/dashboard/features/libraries/components/LibraryCard.tsx

@@ -1,237 +0,0 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import type { VirtualFolderInfo } from '@jellyfin/sdk/lib/generated-client/models/virtual-folder-info';
-import BaseCard from 'apps/dashboard/components/BaseCard';
-import getCollectionTypeOptions from '../utils/collectionTypeOptions';
-import globalize from 'lib/globalize';
-import Icon from '@mui/material/Icon';
-import { getLibraryIcon } from 'utils/image';
-import MediaLibraryEditor from 'components/mediaLibraryEditor/mediaLibraryEditor';
-import { queryClient } from 'utils/query/queryClient';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Folder from '@mui/icons-material/Folder';
-import ImageIcon from '@mui/icons-material/Image';
-import EditIcon from '@mui/icons-material/Edit';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ListItemText from '@mui/material/ListItemText';
-import imageeditor from 'components/imageeditor/imageeditor';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
-import InputDialog from 'components/InputDialog';
-import { useRenameVirtualFolder } from '../api/useRenameVirtualFolder';
-import RefreshDialog from 'components/refreshdialog/refreshdialog';
-import ConfirmDialog from 'components/ConfirmDialog';
-import { useRemoveVirtualFolder } from '../api/useRemoveVirtualFolder';
-import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
-import { useApi } from 'hooks/useApi';
-import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
-import dom from 'utils/dom';
-
-type LibraryCardProps = {
-    virtualFolder: VirtualFolderInfo;
-};
-
-const LibraryCard = ({ virtualFolder }: LibraryCardProps) => {
-    const { api } = useApi();
-    const actionRef = useRef<HTMLButtonElement | null>(null);
-    const [ anchorEl, setAnchorEl ] = useState<HTMLElement | null>(null);
-    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
-    const [ isRenameLibraryDialogOpen, setIsRenameLibraryDialogOpen ] = useState(false);
-    const [ isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen ] = useState(false);
-    const renameVirtualFolder = useRenameVirtualFolder();
-    const removeVirtualFolder = useRemoveVirtualFolder();
-
-    const imageUrl = useMemo(() => {
-        if (virtualFolder.PrimaryImageItemId && virtualFolder.ItemId && api) {
-            return getImageApi(api)
-                .getItemImageUrlById(virtualFolder.ItemId, ImageType.Primary, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.40)
-                });
-        }
-    }, [ api, virtualFolder ]);
-
-    const typeName = getCollectionTypeOptions().filter(function (t) {
-        return t.value == virtualFolder.CollectionType;
-    })[0]?.name || globalize.translate('Other');
-
-    const openRenameDialog = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-        setIsRenameLibraryDialogOpen(true);
-    }, []);
-
-    const hideRenameLibraryDialog = useCallback(() => {
-        setIsRenameLibraryDialogOpen(false);
-    }, []);
-
-    const onMenuClose = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-    }, []);
-
-    const onActionClick = useCallback(() => {
-        setAnchorEl(actionRef.current);
-        setIsMenuOpen(true);
-    }, []);
-
-    const renameLibrary = useCallback((newName: string) => {
-        if (virtualFolder.Name) {
-            renameVirtualFolder.mutate({
-                refreshLibrary: true,
-                newName: newName,
-                name: virtualFolder.Name
-            }, {
-                onSettled: () => {
-                    hideRenameLibraryDialog();
-                }
-            });
-        }
-    }, [ renameVirtualFolder, virtualFolder, hideRenameLibraryDialog ]);
-
-    const showRefreshDialog = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-
-        void new RefreshDialog({
-            itemIds: [ virtualFolder.ItemId ],
-            serverId: ServerConnections.currentApiClient()?.serverId(),
-            mode: 'scan'
-        }).show();
-    }, [ virtualFolder ]);
-
-    const showMediaLibraryEditor = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-
-        const mediaLibraryEditor = new MediaLibraryEditor({
-            library: virtualFolder
-        }) as Promise<boolean>;
-
-        void mediaLibraryEditor.then((hasChanges: boolean) => {
-            if (hasChanges) {
-                void queryClient.invalidateQueries({
-                    queryKey: ['VirtualFolders']
-                });
-            }
-        });
-    }, [ virtualFolder ]);
-
-    const showImageEditor = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-
-        void imageeditor.show({
-            itemId: virtualFolder.ItemId,
-            serverId: ServerConnections.currentApiClient()?.serverId()
-        }).then(() => {
-            void queryClient.invalidateQueries({
-                queryKey: ['VirtualFolders']
-            });
-        }).catch(() => {
-            /* pop up closed */
-        });
-    }, [ virtualFolder ]);
-
-    const showDeleteLibraryDialog = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-        setIsConfirmDeleteDialogOpen(true);
-    }, []);
-
-    const onCancelDeleteLibrary = useCallback(() => {
-        setIsConfirmDeleteDialogOpen(false);
-    }, []);
-
-    const onConfirmDeleteLibrary = useCallback(() => {
-        if (virtualFolder.Name) {
-            removeVirtualFolder.mutate({
-                name: virtualFolder.Name,
-                refreshLibrary: true
-            }, {
-                onSettled: () => {
-                    setIsConfirmDeleteDialogOpen(false);
-                }
-            });
-        }
-    }, [ virtualFolder, removeVirtualFolder ]);
-
-    return (
-        <>
-            <InputDialog
-                title={globalize.translate('ButtonRename')}
-                open={isRenameLibraryDialogOpen}
-                onClose={hideRenameLibraryDialog}
-                label={globalize.translate('LabelNewName')}
-                helperText={globalize.translate('MessageRenameMediaFolder')}
-                initialText={virtualFolder.Name || ''}
-                confirmButtonText={globalize.translate('ButtonRename')}
-                onConfirm={renameLibrary}
-            />
-
-            <ConfirmDialog
-                open={isConfirmDeleteDialogOpen}
-                title={globalize.translate('HeaderRemoveMediaFolder')}
-                text={
-                    globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder') + '\n\n'
-                    + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '\n\n'
-                    + virtualFolder.Locations?.join('\n')
-                }
-                confirmButtonText={globalize.translate('Delete')}
-                confirmButtonColor='error'
-                onConfirm={onConfirmDeleteLibrary}
-                onCancel={onCancelDeleteLibrary}
-            />
-
-            <BaseCard
-                title={virtualFolder.Name || ''}
-                text={typeName}
-                image={imageUrl}
-                icon={<Icon sx={{ fontSize: 70 }}>{getLibraryIcon(virtualFolder.CollectionType)}</Icon>}
-                action={true}
-                actionRef={actionRef}
-                onActionClick={onActionClick}
-                onClick={showMediaLibraryEditor}
-                height={260}
-            />
-            <Menu
-                anchorEl={anchorEl}
-                open={isMenuOpen}
-                onClose={onMenuClose}
-            >
-                <MenuItem onClick={showImageEditor}>
-                    <ListItemIcon>
-                        <ImageIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('EditImages')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={showMediaLibraryEditor}>
-                    <ListItemIcon>
-                        <Folder />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('ManageLibrary')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={openRenameDialog}>
-                    <ListItemIcon>
-                        <EditIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('ButtonRename')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={showRefreshDialog}>
-                    <ListItemIcon>
-                        <RefreshIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('ScanLibrary')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={showDeleteLibraryDialog}>
-                    <ListItemIcon>
-                        <DeleteIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('ButtonRemove')}</ListItemText>
-                </MenuItem>
-            </Menu>
-        </>
-    );
-};
-
-export default LibraryCard;

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

@@ -1,31 +0,0 @@
-import globalize from 'lib/globalize';
-
-const getCollectionTypeOptions = () => {
-    return [{
-        name: '',
-        value: ''
-    }, {
-        name: globalize.translate('Movies'),
-        value: 'movies'
-    }, {
-        name: globalize.translate('TabMusic'),
-        value: 'music'
-    }, {
-        name: globalize.translate('Shows'),
-        value: 'tvshows'
-    }, {
-        name: globalize.translate('Books'),
-        value: 'books'
-    }, {
-        name: globalize.translate('HomeVideosPhotos'),
-        value: 'homevideos'
-    }, {
-        name: globalize.translate('MusicVideos'),
-        value: 'musicvideos'
-    }, {
-        name: globalize.translate('MixedMoviesShows'),
-        value: 'mixed'
-    }];
-};
-
-export default getCollectionTypeOptions;

src/apps/dashboard/features/livetv/api/useDeleteProvider.ts

@@ -1,22 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
-import { LiveTvApiDeleteListingProviderRequest } from '@jellyfin/sdk/lib/generated-client/api/live-tv-api';
-
-export const useDeleteProvider = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: LiveTvApiDeleteListingProviderRequest) => (
-            getLiveTvApi(api!)
-                .deleteListingProvider(params)
-        ),
-        onSuccess: () => {
-            void queryClient.invalidateQueries({
-                queryKey: [ 'NamedConfiguration', 'livetv' ]
-            });
-        }
-    });
-};

src/apps/dashboard/features/livetv/api/useDeleteTuner.ts

@@ -1,22 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
-import { LiveTvApiDeleteTunerHostRequest } from '@jellyfin/sdk/lib/generated-client/api/live-tv-api';
-
-export const useDeleteTuner = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: LiveTvApiDeleteTunerHostRequest) => (
-            getLiveTvApi(api!)
-                .deleteTunerHost(params)
-        ),
-        onSuccess: () => {
-            void queryClient.invalidateQueries({
-                queryKey: [ 'NamedConfiguration', 'livetv' ]
-            });
-        }
-    });
-};

src/apps/dashboard/features/livetv/components/Provider.tsx

@@ -1,138 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { ListingsProviderInfo } from '@jellyfin/sdk/lib/generated-client/models/listings-provider-info';
-import Avatar from '@mui/material/Avatar';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemLink from 'components/ListItemLink';
-import DvrIcon from '@mui/icons-material/Dvr';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import getProviderConfigurationUrl from '../utils/getProviderConfigurationUrl';
-import ListItemText from '@mui/material/ListItemText';
-import getProviderName from '../utils/getProviderName';
-import IconButton from '@mui/material/IconButton';
-import ConfirmDialog from 'components/ConfirmDialog';
-import globalize from 'lib/globalize';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ChannelMapper from 'components/channelMapper/channelMapper';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { useDeleteProvider } from '../api/useDeleteProvider';
-
-interface ProviderProps {
-    provider: ListingsProviderInfo
-}
-
-const Provider = ({ provider }: ProviderProps) => {
-    const [ isDeleteProviderDialogOpen, setIsDeleteProviderDialogOpen ] = useState(false);
-    const actionsRef = useRef<HTMLButtonElement | null>(null);
-    const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
-    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
-    const deleteProvider = useDeleteProvider();
-
-    const showChannelMapper = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-        void new ChannelMapper({
-            serverId: ServerConnections.currentApiClient()?.serverId(),
-            providerId: provider.Id
-        }).show();
-    }, [ provider ]);
-
-    const showContextMenu = useCallback(() => {
-        setAnchorEl(actionsRef.current);
-        setIsMenuOpen(true);
-    }, []);
-
-    const showDeleteDialog = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-        setIsDeleteProviderDialogOpen(true);
-    }, []);
-
-    const onDeleteProviderDialogCancel = useCallback(() => {
-        setIsDeleteProviderDialogOpen(false);
-    }, []);
-
-    const onMenuClose = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-    }, []);
-
-    const onConfirmDelete = useCallback(() => {
-        if (provider.Id) {
-            deleteProvider.mutate({
-                id: provider.Id
-            }, {
-                onSettled: () => {
-                    setIsDeleteProviderDialogOpen(false);
-                }
-            });
-        }
-    }, [ deleteProvider, provider ]);
-
-    return (
-        <>
-            <ConfirmDialog
-                open={isDeleteProviderDialogOpen}
-                title={globalize.translate('HeaderDeleteProvider')}
-                text={globalize.translate('MessageConfirmDeleteGuideProvider')}
-                onCancel={onDeleteProviderDialogCancel}
-                onConfirm={onConfirmDelete}
-                confirmButtonText={globalize.translate('Delete')}
-                confirmButtonColor='error'
-            />
-            <ListItem
-                disablePadding key={provider.Id}
-                secondaryAction={
-                    <IconButton ref={actionsRef} onClick={showContextMenu}>
-                        <MoreVertIcon />
-                    </IconButton>
-                }
-            >
-                <ListItemLink to={getProviderConfigurationUrl(provider.Type || '') + '&id=' + provider.Id}>
-                    <ListItemAvatar>
-                        <Avatar sx={{ bgcolor: 'primary.main' }}>
-                            <DvrIcon sx={{ color: '#fff' }} />
-                        </Avatar>
-                    </ListItemAvatar>
-                    <ListItemText
-                        primary={getProviderName(provider.Type)}
-                        secondary={provider.Path || provider.ListingsId}
-                        slotProps={{
-                            primary: {
-                                variant: 'h3'
-                            },
-                            secondary: {
-                                variant: 'body1'
-                            }
-                        }}
-                    />
-                </ListItemLink>
-            </ListItem>
-
-            <Menu
-                anchorEl={anchorEl}
-                open={isMenuOpen}
-                onClose={onMenuClose}
-            >
-                <MenuItem onClick={showChannelMapper}>
-                    <ListItemIcon>
-                        <LocationSearchingIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('MapChannels')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={showDeleteDialog}>
-                    <ListItemIcon>
-                        <DeleteIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('Delete')}</ListItemText>
-                </MenuItem>
-            </Menu>
-        </>
-    );
-};
-
-export default Provider;

src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx

@@ -1,109 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { TunerHostInfo } from '@jellyfin/sdk/lib/generated-client/models/tuner-host-info';
-import BaseCard from 'apps/dashboard/components/BaseCard';
-import DvrIcon from '@mui/icons-material/Dvr';
-import getTunerName from '../utils/getTunerName';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import ListItemText from '@mui/material/ListItemText';
-import globalize from 'lib/globalize';
-import { useNavigate } from 'react-router-dom';
-import ConfirmDialog from 'components/ConfirmDialog';
-import { useDeleteTuner } from '../api/useDeleteTuner';
-
-interface TunerDeviceCardProps {
-    tunerHost: TunerHostInfo;
-}
-
-const TunerDeviceCard = ({ tunerHost }: TunerDeviceCardProps) => {
-    const navigate = useNavigate();
-    const actionRef = useRef<HTMLButtonElement | null>(null);
-    const [ anchorEl, setAnchorEl ] = useState<HTMLElement | null>(null);
-    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
-    const [ isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen ] = useState(false);
-    const deleteTuner = useDeleteTuner();
-
-    const navigateToEditPage = useCallback(() => {
-        navigate(`/dashboard/livetv/tuner?id=${tunerHost.Id}`);
-    }, [ navigate, tunerHost ]);
-
-    const onDelete = useCallback(() => {
-        if (tunerHost.Id) {
-            deleteTuner.mutate({
-                id: tunerHost.Id
-            }, {
-                onSettled: () => {
-                    setIsConfirmDeleteDialogOpen(false);
-                }
-            });
-        }
-    }, [ deleteTuner, tunerHost ]);
-
-    const showDeleteDialog = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-        setIsConfirmDeleteDialogOpen(true);
-    }, []);
-
-    const onDeleteDialogClose = useCallback(() => {
-        setIsConfirmDeleteDialogOpen(false);
-    }, []);
-
-    const onActionClick = useCallback(() => {
-        setAnchorEl(actionRef.current);
-        setIsMenuOpen(true);
-    }, []);
-
-    const onMenuClose = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-    }, []);
-
-    return (
-        <>
-            <ConfirmDialog
-                open={isConfirmDeleteDialogOpen}
-                title={globalize.translate('HeaderDeleteDevice')}
-                text={globalize.translate('MessageConfirmDeleteTunerDevice')}
-                onCancel={onDeleteDialogClose}
-                onConfirm={onDelete}
-                confirmButtonColor='error'
-                confirmButtonText={globalize.translate('Delete')}
-            />
-
-            <BaseCard
-                title={tunerHost.FriendlyName || getTunerName(tunerHost.Type) || ''}
-                text={tunerHost.Url || ''}
-                icon={<DvrIcon sx={{ fontSize: 70 }} />}
-                action={true}
-                actionRef={actionRef}
-                onActionClick={onActionClick}
-                onClick={navigateToEditPage}
-            />
-
-            <Menu
-                anchorEl={anchorEl}
-                open={isMenuOpen}
-                onClose={onMenuClose}
-            >
-                <MenuItem onClick={navigateToEditPage}>
-                    <ListItemIcon>
-                        <EditIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('Edit')}</ListItemText>
-                </MenuItem>
-                <MenuItem onClick={showDeleteDialog}>
-                    <ListItemIcon>
-                        <DeleteIcon />
-                    </ListItemIcon>
-                    <ListItemText>{globalize.translate('Delete')}</ListItemText>
-                </MenuItem>
-            </Menu>
-        </>
-    );
-};
-
-export default TunerDeviceCard;

src/apps/dashboard/features/livetv/utils/getProviderConfigurationUrl.ts

@@ -1,10 +0,0 @@
-const getProviderConfigurationUrl = (providerId: string) => {
-    switch (providerId?.toLowerCase()) {
-        case 'xmltv':
-            return '/dashboard/livetv/guide?type=xmltv';
-        case 'schedulesdirect':
-            return '/dashboard/livetv/guide?type=schedulesdirect';
-    }
-};
-
-export default getProviderConfigurationUrl;

src/apps/dashboard/features/livetv/utils/getProviderName.ts

@@ -1,12 +0,0 @@
-const getProviderName = (providerId: string | null | undefined) => {
-    switch (providerId?.toLowerCase()) {
-        case 'schedulesdirect':
-            return 'Schedules Direct';
-        case 'xmltv':
-            return 'XMLTV';
-        default:
-            return 'Unknown';
-    }
-};
-
-export default getProviderName;

src/apps/dashboard/features/livetv/utils/getTunerName.ts

@@ -1,16 +0,0 @@
-const getTunerName = (providerId: string | null | undefined) => {
-    switch (providerId?.toLowerCase()) {
-        case 'm3u':
-            return 'M3U';
-        case 'hdhomerun':
-            return 'HDHomeRun';
-        case 'hauppauge':
-            return 'Hauppauge';
-        case 'satip':
-            return 'DVB';
-        default:
-            return 'Unknown';
-    }
-};
-
-export default getTunerName;

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

@@ -12,13 +12,7 @@ const fetchServerLog = async (
     const response = await getSystemApi(api).getLogFile({ name }, options);
 
     // FIXME: TypeScript SDK thinks it is returning a File but in reality it is a string
-    const data = response.data as never as string | object;
-
-    if (typeof data === 'object') {
-        return JSON.stringify(data, null, 2);
-    } else {
-        return data;
-    }
+    return response.data as never as string;
 };
 export const useServerLog = (name: string) => {
     const { api } = useApi();

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

@@ -1,119 +0,0 @@
-import { PluginStatus } from '@jellyfin/sdk/lib/generated-client/models/plugin-status';
-import { useMemo } from 'react';
-
-import { useApi } from 'hooks/useApi';
-
-import { PluginCategory } from '../constants/pluginCategory';
-import type { PluginDetails } from '../types/PluginDetails';
-
-import { findBestConfigurationPage } from './configurationPage';
-import { findBestPluginInfo } from './pluginInfo';
-import { useConfigurationPages } from './useConfigurationPages';
-import { usePackages } from './usePackages';
-import { usePlugins } from './usePlugins';
-
-export const usePluginDetails = () => {
-    const { api } = useApi();
-
-    const {
-        data: configurationPages,
-        isError: isConfigurationPagesError,
-        isPending: isConfigurationPagesPending
-    } = useConfigurationPages();
-
-    const {
-        data: packages,
-        isError: isPackagesError,
-        isPending: isPackagesPending
-    } = usePackages();
-
-    const {
-        data: plugins,
-        isError: isPluginsError,
-        isPending: isPluginsPending
-    } = usePlugins();
-
-    const pluginDetails = useMemo<PluginDetails[]>(() => {
-        if (!isPackagesPending && !isPluginsPending) {
-            const pluginIds = new Set<string>();
-            packages?.forEach(({ guid }) => {
-                if (guid) pluginIds.add(guid);
-            });
-            plugins?.forEach(({ Id }) => {
-                if (Id) pluginIds.add(Id);
-            });
-
-            return Array.from(pluginIds)
-                .map(id => {
-                    const packageInfo = packages?.find(pkg => pkg.guid === id);
-                    const pluginInfo = findBestPluginInfo(id, plugins);
-
-                    let version;
-                    if (pluginInfo) {
-                        // Find the installed version
-                        const repoVersion = packageInfo?.versions?.find(v => v.version === pluginInfo.Version);
-                        version = repoVersion || {
-                            version: pluginInfo.Version,
-                            VersionNumber: pluginInfo.Version
-                        };
-                    } else {
-                        // Use the latest version
-                        version = packageInfo?.versions?.[0];
-                    }
-
-                    let imageUrl;
-                    if (pluginInfo?.HasImage) {
-                        imageUrl = api?.getUri(`/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image`);
-                    }
-
-                    let category = packageInfo?.category;
-                    if (!packageInfo) {
-                        switch (id) {
-                            case 'a629c0dafac54c7e931a7174223f14c8': // AudioDB
-                            case '8c95c4d2e50c4fb0a4f36c06ff0f9a1a': // MusicBrainz
-                                category = PluginCategory.Music;
-                                break;
-                            case 'a628c0dafac54c7e9d1a7134223f14c8': // OMDb
-                            case 'b8715ed16c4745289ad3f72deb539cd4': // TMDb
-                                category = PluginCategory.MoviesAndShows;
-                                break;
-                            case '872a78491171458da6fb3de3d442ad30': // Studio Images
-                                category = PluginCategory.General;
-                        }
-                    }
-
-                    return {
-                        canUninstall: !!pluginInfo?.CanUninstall,
-                        category,
-                        description: pluginInfo?.Description || packageInfo?.description || packageInfo?.overview,
-                        id,
-                        imageUrl: imageUrl || packageInfo?.imageUrl || undefined,
-                        isEnabled: pluginInfo?.Status !== PluginStatus.Disabled,
-                        name: pluginInfo?.Name || packageInfo?.name,
-                        owner: packageInfo?.owner,
-                        status: pluginInfo?.Status,
-                        configurationPage: findBestConfigurationPage(configurationPages || [], id),
-                        version,
-                        versions: packageInfo?.versions || []
-                    };
-                })
-                .sort(({ name: nameA }, { name: nameB }) => (
-                    (nameA || '').localeCompare(nameB || '')
-                ));
-        }
-
-        return [];
-    }, [
-        api,
-        configurationPages,
-        isPluginsPending,
-        packages,
-        plugins
-    ]);
-
-    return {
-        data: pluginDetails,
-        isError: isConfigurationPagesError || isPackagesError || isPluginsError,
-        isPending: isConfigurationPagesPending || isPackagesPending || isPluginsPending
-    };
-};

src/apps/dashboard/features/plugins/components/NoPluginResults.tsx

@@ -1,51 +0,0 @@
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import React, { type FC } from 'react';
-
-import globalize from 'lib/globalize';
-
-interface NoPluginResultsProps {
-    isFiltered: boolean
-    onViewAll: () => void
-    query: string
-}
-
-const NoPluginResults: FC<NoPluginResultsProps> = ({
-    isFiltered,
-    onViewAll,
-    query
-}) => {
-    return (
-        <Box
-            sx={{
-                textAlign: 'center'
-            }}
-        >
-            <Typography
-                component='div'
-                sx={{
-                    marginTop: 2,
-                    marginBottom: 1
-                }}
-            >
-                {
-                    query ?
-                        globalize.translate('SearchResultsEmpty', query) :
-                        globalize.translate('NoSubtitleSearchResultsFound')
-                }
-            </Typography>
-
-            {isFiltered && (
-                <Button
-                    variant='text'
-                    onClick={onViewAll}
-                >
-                    {globalize.translate('ViewAllPlugins')}
-                </Button>
-            )}
-        </Box>
-    );
-};
-
-export default NoPluginResults;

src/apps/dashboard/features/plugins/components/PackageCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { PackageInfo } from '@jellyfin/sdk/lib/generated-client/models/package-info';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import BaseCard from 'apps/dashboard/components/BaseCard';
+import { useLocation } from 'react-router-dom';
+
+type IProps = {
+    pkg: PackageInfo;
+};
+
+const PackageCard = ({ pkg }: IProps) => {
+    const location = useLocation();
+
+    return (
+        <BaseCard
+            title={pkg.name}
+            image={pkg.imageUrl}
+            icon={<ExtensionIcon sx={{ width: 80, height: 80 }} />}
+            to={{
+                pathname: `/dashboard/plugins/${pkg.guid}`,
+                search: `?name=${encodeURIComponent(pkg.name || '')}`,
+                hash: location.hash
+            }}
+        />
+    );
+};
+
+export default PackageCard;

src/apps/dashboard/features/plugins/components/PluginCard.tsx

@@ -1,34 +1,171 @@
-import ExtensionIcon from '@mui/icons-material/Extension';
-import React, { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useApi } from 'hooks/useApi';
+import type { PluginInfo } from '@jellyfin/sdk/lib/generated-client/models/plugin-info';
+import globalize from 'lib/globalize';
 import BaseCard from 'apps/dashboard/components/BaseCard';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Settings from '@mui/icons-material/Settings';
+import Delete from '@mui/icons-material/Delete';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import BlockIcon from '@mui/icons-material/Block';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import ListItemText from '@mui/material/ListItemText';
+import { PluginStatus } from '@jellyfin/sdk/lib/generated-client/models/plugin-status';
+import type { ConfigurationPageInfo } from '@jellyfin/sdk/lib/generated-client/models/configuration-page-info';
+import { useEnablePlugin } from '../api/useEnablePlugin';
+import { useDisablePlugin } from '../api/useDisablePlugin';
+import { useUninstallPlugin } from '../api/useUninstallPlugin';
+import ConfirmDialog from 'components/ConfirmDialog';
 
-import { PluginDetails } from '../types/PluginDetails';
-
-interface PluginCardProps {
-    plugin: PluginDetails;
+interface IProps {
+    plugin: PluginInfo;
+    configurationPage?: ConfigurationPageInfo;
 };
 
-const PluginCard = ({ plugin }: PluginCardProps) => {
+const PluginCard = ({ plugin, configurationPage }: IProps) => {
     const location = useLocation();
+    const navigate = useNavigate();
+    const actionRef = useRef<HTMLButtonElement | null>(null);
+    const enablePlugin = useEnablePlugin();
+    const disablePlugin = useDisablePlugin();
+    const uninstallPlugin = useUninstallPlugin();
+    const [ anchorEl, setAnchorEl ] = useState<HTMLElement | null>(null);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const [ isUninstallConfirmOpen, setIsUninstallConfirmOpen ] = useState(false);
+    const { api } = useApi();
 
     const pluginPage = useMemo(() => (
         {
-            pathname: `/dashboard/plugins/${plugin.id}`,
-            search: `?name=${encodeURIComponent(plugin.name || '')}`,
+            pathname: '/configurationpage',
+            search: `?name=${encodeURIComponent(configurationPage?.Name || '')}`,
             hash: location.hash
         }
-    ), [ location, plugin ]);
+    ), [ location, configurationPage ]);
+
+    const navigateToPluginSettings = useCallback(() => {
+        navigate(pluginPage);
+    }, [ navigate, pluginPage ]);
+
+    const onEnablePlugin = useCallback(() => {
+        if (plugin.Id && plugin.Version) {
+            enablePlugin.mutate({
+                pluginId: plugin.Id,
+                version: plugin.Version
+            });
+            setAnchorEl(null);
+            setIsMenuOpen(false);
+        }
+    }, [ plugin, enablePlugin ]);
+
+    const onDisablePlugin = useCallback(() => {
+        if (plugin.Id && plugin.Version) {
+            disablePlugin.mutate({
+                pluginId: plugin.Id,
+                version: plugin.Version
+            });
+            setAnchorEl(null);
+            setIsMenuOpen(false);
+        }
+    }, [ plugin, disablePlugin ]);
+
+    const onCloseUninstallConfirmDialog = useCallback(() => {
+        setIsUninstallConfirmOpen(false);
+    }, []);
+
+    const showUninstallConfirmDialog = useCallback(() => {
+        setIsUninstallConfirmOpen(true);
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    const onUninstall = useCallback(() => {
+        if (plugin.Id && plugin.Version) {
+            uninstallPlugin.mutate({
+                pluginId: plugin.Id,
+                version: plugin.Version
+            });
+            setAnchorEl(null);
+            setIsMenuOpen(false);
+        }
+    }, [ plugin, uninstallPlugin ]);
+
+    const onMenuClose = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    const onActionClick = useCallback(() => {
+        setAnchorEl(actionRef.current);
+        setIsMenuOpen(true);
+    }, []);
 
     return (
-        <BaseCard
-            title={plugin.name}
-            to={pluginPage}
-            text={[plugin.version?.VersionNumber, plugin.status].filter(t => t).join(' ')}
-            image={plugin.imageUrl}
-            icon={<ExtensionIcon sx={{ width: 80, height: 80 }} />}
-        />
+        <>
+            <BaseCard
+                title={plugin.Name}
+                secondaryTitle={plugin.Version}
+                to={pluginPage}
+                text={`${globalize.translate('LabelStatus')} ${plugin.Status}`}
+                image={plugin.HasImage ? api?.getUri(`/Plugins/${plugin.Id}/${plugin.Version}/Image`) : null}
+                icon={<ExtensionIcon sx={{ width: 80, height: 80 }} />}
+                action={true}
+                actionRef={actionRef}
+                onActionClick={onActionClick}
+            />
+            <Menu
+                anchorEl={anchorEl}
+                open={isMenuOpen}
+                onClose={onMenuClose}
+            >
+                {configurationPage && (
+                    <MenuItem onClick={navigateToPluginSettings}>
+                        <ListItemIcon>
+                            <Settings />
+                        </ListItemIcon>
+                        <ListItemText>{globalize.translate('Settings')}</ListItemText>
+                    </MenuItem>
+                )}
+
+                {(plugin.CanUninstall && plugin.Status === PluginStatus.Active) && (
+                    <MenuItem onClick={onDisablePlugin}>
+                        <ListItemIcon>
+                            <BlockIcon />
+                        </ListItemIcon>
+                        <ListItemText>{globalize.translate('DisablePlugin')}</ListItemText>
+                    </MenuItem>
+                )}
+
+                {(plugin.CanUninstall && plugin.Status === PluginStatus.Disabled) && (
+                    <MenuItem onClick={onEnablePlugin}>
+                        <ListItemIcon>
+                            <CheckCircleOutlineIcon />
+                        </ListItemIcon>
+                        <ListItemText>{globalize.translate('EnablePlugin')}</ListItemText>
+                    </MenuItem>
+                )}
+
+                {plugin.CanUninstall && (
+                    <MenuItem onClick={showUninstallConfirmDialog}>
+                        <ListItemIcon>
+                            <Delete />
+                        </ListItemIcon>
+                        <ListItemText>{globalize.translate('ButtonUninstall')}</ListItemText>
+                    </MenuItem>
+                )}
+            </Menu>
+            <ConfirmDialog
+                open={isUninstallConfirmOpen}
+                title={globalize.translate('HeaderUninstallPlugin')}
+                text={globalize.translate('UninstallPluginConfirmation', plugin.Name || '')}
+                onCancel={onCloseUninstallConfirmDialog}
+                onConfirm={onUninstall}
+                confirmButtonColor='error'
+                confirmButtonText={globalize.translate('ButtonUninstall')}
+            />
+        </>
     );
 };
 

src/apps/dashboard/features/plugins/components/PluginDetailsTable.tsx

@@ -72,9 +72,6 @@ const PluginDetailsTable: FC<PluginDetailsTableProps> = ({
                     <TableCell>
                         {
                             (isRepositoryLoading && <Skeleton />)
-                            || (pluginDetails?.status && pluginDetails?.canUninstall === false
-                                && globalize.translate('LabelBundled')
-                            )
                             || (pluginDetails?.version?.repositoryUrl && (
                                 <Link
                                     component={RouterLink}

src/apps/dashboard/features/plugins/constants/categoryLabels.ts

@@ -1,14 +1,15 @@
-import { PluginCategory } from './pluginCategory';
-
 /** A mapping of category names used by the plugin repository to translation keys. */
-export const CATEGORY_LABELS: Record<PluginCategory, string> = {
-    [PluginCategory.Administration]: 'HeaderAdmin',
-    [PluginCategory.General]: 'General',
-    [PluginCategory.Anime]: 'Anime',
-    [PluginCategory.Books]: 'Books',
-    [PluginCategory.LiveTV]: 'LiveTV',
-    [PluginCategory.MoviesAndShows]: 'MoviesAndShows',
-    [PluginCategory.Music]: 'TabMusic',
-    [PluginCategory.Subtitles]: 'Subtitles',
-    [PluginCategory.Other]: 'Other'
+export const CATEGORY_LABELS: Record<string, string> = {
+    Administration: 'HeaderAdmin',
+    Anime: 'Anime',
+    Authentication: 'LabelAuthProvider', // Legacy
+    Books: 'Books',
+    Channel: 'Channels', // Unused?
+    General: 'General',
+    LiveTV: 'LiveTV',
+    Metadata: 'LabelMetadata', // Legacy
+    MoviesAndShows: 'MoviesAndShows',
+    Music: 'TabMusic',
+    Subtitles: 'Subtitles',
+    Other: 'Other'
 };

src/apps/dashboard/features/plugins/constants/pluginCategory.ts

@@ -1,12 +0,0 @@
-/** Supported plugin category values. */
-export enum PluginCategory {
-    Administration = 'Administration',
-    General = 'General',
-    Anime = 'Anime',
-    Books = 'Books',
-    LiveTV = 'LiveTV',
-    MoviesAndShows = 'MoviesAndShows',
-    Music = 'Music',
-    Subtitles = 'Subtitles',
-    Other = 'Other'
-}

src/apps/dashboard/features/plugins/constants/pluginStatusOption.ts

@@ -1,6 +0,0 @@
-/** Options for filtering plugins based on the installation status. */
-export enum PluginStatusOption {
-    All = 'All',
-    Available = 'Available',
-    Installed = 'Installed'
-}

src/apps/dashboard/features/plugins/types/PluginDetails.ts

@@ -2,7 +2,6 @@ import type { ConfigurationPageInfo, PluginStatus, VersionInfo } from '@jellyfin
 
 export interface PluginDetails {
     canUninstall: boolean
-    category?: string
     description?: string
     id: string
     imageUrl?: string

src/apps/dashboard/features/plugins/utils/getPackageCategories.ts

@@ -0,0 +1,17 @@
+import type { PackageInfo } from '@jellyfin/sdk/lib/generated-client/models/package-info';
+
+const getPackageCategories = (packages?: PackageInfo[]) => {
+    if (!packages) return [];
+
+    const categories: string[] = [];
+
+    for (const pkg of packages) {
+        if (pkg.category && !categories.includes(pkg.category)) {
+            categories.push(pkg.category);
+        }
+    }
+
+    return categories.sort((a, b) => a.localeCompare(b));
+};
+
+export default getPackageCategories;

src/apps/dashboard/features/plugins/utils/getPackagesByCategory.ts

@@ -0,0 +1,17 @@
+import type { PackageInfo } from '@jellyfin/sdk/lib/generated-client/models/package-info';
+
+const getPackagesByCategory = (packages: PackageInfo[] | undefined, category: string) => {
+    if (!packages) return [];
+
+    return packages
+        .filter(pkg => pkg.category === category)
+        .sort((a, b) => {
+            if (a.name && b.name) {
+                return a.name.localeCompare(b.name);
+            } else {
+                return 0;
+            }
+        });
+};
+
+export default getPackagesByCategory;

src/apps/dashboard/features/sessions/utils/getNowPlayingImageUrl.ts

@@ -1,7 +1,7 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import dom from 'utils/dom';
+import dom from 'scripts/dom';
 
 const getNowPlayingImageUrl = (item: BaseItemDto) => {
     if (!item.ServerId) return null;

src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx

@@ -164,7 +164,7 @@ const NewTriggerForm: FunctionComponent<IProps> = ({ open, title, onClose, onAdd
             <DialogActions>
                 <Button
                     onClick={onClose}
-                    variant='text'
+                    color='error'
                 >{globalize.translate('ButtonCancel')}</Button>
                 <Button type='submit'>{globalize.translate('Add')}</Button>
             </DialogActions>

src/apps/dashboard/features/tasks/components/TaskProgress.tsx

@@ -8,15 +8,7 @@ const TaskProgress: FunctionComponent<TaskProps> = ({ task }: TaskProps) => {
     const progress = task.CurrentProgressPercentage;
 
     return (
-        <Box
-            sx={{
-                display: 'flex',
-                alignItems: 'center',
-                height: '1.2rem',
-                mr: 2,
-                minWidth: '170px'
-            }}
-        >
+        <Box sx={{ display: 'flex', alignItems: 'center', height: '1.2rem', mr: 2 }}>
             {progress != null ? (
                 <>
                     <Box sx={{ width: '100%', mr: 1 }}>

src/apps/dashboard/features/users/api/useAuthProviders.ts

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

src/apps/dashboard/features/users/api/useChannels.ts

@@ -1,22 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import { getChannelsApi } from '@jellyfin/sdk/lib/utils/api/channels-api';
-import { ChannelsApiGetChannelsRequest } from '@jellyfin/sdk/lib/generated-client/api/channels-api';
-import type { AxiosRequestConfig } from 'axios';
-
-const fetchChannels = async (api: Api, params?: ChannelsApiGetChannelsRequest, options?: AxiosRequestConfig) => {
-    const response = await getChannelsApi(api).getChannels(params, options);
-
-    return response.data;
-};
-
-export const useChannels = (params?: ChannelsApiGetChannelsRequest) => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: [ 'Channels' ],
-        queryFn: ({ signal }) => fetchChannels(api!, params, { signal }),
-        enabled: !!api
-    });
-};

src/apps/dashboard/features/users/api/useCreateUser.ts

@@ -1,15 +0,0 @@
-import { UserApiCreateUserByNameRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
-import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-
-export const useCreateUser = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: UserApiCreateUserByNameRequest) => (
-            getUserApi(api!)
-                .createUserByName(params)
-        )
-    });
-};

src/apps/dashboard/features/users/api/useDeleteUser.ts

@@ -1,22 +0,0 @@
-import { UserApiDeleteUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
-import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import { QUERY_KEY } from 'hooks/useUsers';
-import { queryClient } from 'utils/query/queryClient';
-
-export const useDeleteUser = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: UserApiDeleteUserRequest) => (
-            getUserApi(api!)
-                .deleteUser(params)
-        ),
-        onSuccess: () => {
-            void queryClient.invalidateQueries({
-                queryKey: [ QUERY_KEY ]
-            });
-        }
-    });
-};

src/apps/dashboard/features/users/api/useLibraryMediaFolders.ts

@@ -1,22 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { LibraryApiGetMediaFoldersRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
-import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
-import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import type { AxiosRequestConfig } from 'axios';
-
-const fetchLibraryMediaFolders = async (api: Api, params?: LibraryApiGetMediaFoldersRequest, options?: AxiosRequestConfig) => {
-    const response = await getLibraryApi(api).getMediaFolders(params, options);
-
-    return response.data;
-};
-
-export const useLibraryMediaFolders = (params?: LibraryApiGetMediaFoldersRequest) => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: ['LibraryMediaFolders'],
-        queryFn: ({ signal }) => fetchLibraryMediaFolders(api!, params, { signal }),
-        enabled: !!api
-    });
-};

src/apps/dashboard/features/users/api/useNetworkConfig.ts

@@ -1,22 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
-import type { AxiosRequestConfig } from 'axios';
-import type { NetworkConfiguration } from '@jellyfin/sdk/lib/generated-client/models/network-configuration';
-
-const fetchNetworkConfig = async (api: Api, options?: AxiosRequestConfig) => {
-    const response = await getConfigurationApi(api).getNamedConfiguration({ key: 'network' }, options);
-
-    return response.data as NetworkConfiguration;
-};
-
-export const useNetworkConfig = () => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: [ 'NetConfig' ],
-        queryFn: ({ signal }) => fetchNetworkConfig(api!, { signal }),
-        enabled: !!api
-    });
-};

src/apps/dashboard/features/users/api/useParentalRatings.ts

@@ -1,21 +0,0 @@
-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 fetchParentalRatings = async (api: Api, options?: AxiosRequestConfig) => {
-    const response = await getLocalizationApi(api).getParentalRatings(options);
-
-    return response.data;
-};
-
-export const useParentalRatings = () => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: ['ParentalRatings'],
-        queryFn: ({ signal }) => fetchParentalRatings(api!, { signal }),
-        enabled: !!api
-    });
-};

src/apps/dashboard/features/users/api/usePasswordResetProviders.ts

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

src/apps/dashboard/features/users/api/useUpdateUser.ts

@@ -1,22 +0,0 @@
-import { UserApiUpdateUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
-import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-import { QUERY_KEY } from './useUser';
-
-export const useUpdateUser = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: UserApiUpdateUserRequest) => (
-            getUserApi(api!)
-                .updateUser(params)
-        ),
-        onSuccess: (_, params) => {
-            void queryClient.invalidateQueries({
-                queryKey: [QUERY_KEY, params.userId]
-            });
-        }
-    });
-};

src/apps/dashboard/features/users/api/useUpdateUserPolicy.ts

@@ -1,23 +0,0 @@
-import { UserApiUpdateUserPolicyRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
-import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import { queryClient } from 'utils/query/queryClient';
-import { QUERY_KEY } from './useUser';
-
-export const useUpdateUserPolicy = () => {
-    const { api } = useApi();
-
-    return useMutation({
-        mutationFn: (params: UserApiUpdateUserPolicyRequest) => (
-
-            getUserApi(api!)
-                .updateUserPolicy(params)
-        ),
-        onSuccess: (_, params) => {
-            void queryClient.invalidateQueries({
-                queryKey: [QUERY_KEY, params.userId]
-            });
-        }
-    });
-};

src/apps/dashboard/features/users/api/useUser.ts

@@ -1,24 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { UserApiGetUserByIdRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
-import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
-import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'hooks/useApi';
-import type { AxiosRequestConfig } from 'axios';
-
-export const QUERY_KEY = 'User';
-
-const fetchUser = async (api: Api, params: UserApiGetUserByIdRequest, options?: AxiosRequestConfig) => {
-    const response = await getUserApi(api).getUserById(params, options);
-
-    return response.data;
-};
-
-export const useUser = (params?: UserApiGetUserByIdRequest) => {
-    const { api } = useApi();
-
-    return useQuery({
-        queryKey: [ QUERY_KEY, params?.userId ],
-        queryFn: ({ signal }) => fetchUser(api!, params!, { signal }),
-        enabled: !!api && !!params
-    });
-};

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -9,11 +9,9 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'devices', type: AppType.Dashboard },
     { path: 'settings', type: AppType.Dashboard },
     { path: 'keys', type: AppType.Dashboard },
-    { path: 'libraries', type: AppType.Dashboard },
     { path: 'libraries/display', type: AppType.Dashboard },
     { path: 'libraries/metadata', type: AppType.Dashboard },
     { path: 'libraries/nfo', type: AppType.Dashboard },
-    { path: 'livetv', type: AppType.Dashboard },
     { path: 'livetv/recordings', type: AppType.Dashboard },
     { path: 'logs', type: AppType.Dashboard },
     { path: 'logs/:file', page: 'logs/file', type: AppType.Dashboard },
@@ -23,6 +21,7 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'playback/trickplay', type: AppType.Dashboard },
     { path: 'plugins', type: AppType.Dashboard },
     { path: 'plugins/:pluginId', page: 'plugins/plugin', type: AppType.Dashboard },
+    { path: 'plugins/catalog', type: AppType.Dashboard },
     { path: 'plugins/repositories', type: AppType.Dashboard },
     { path: 'tasks', type: AppType.Dashboard },
     { path: 'tasks/:id', page: 'tasks/task', type: AppType.Dashboard },

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -9,6 +9,13 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'networking',
             view: 'networking.html'
         }
+    }, {
+        path: 'libraries',
+        pageProps: {
+            appType: AppType.Dashboard,
+            controller: 'library',
+            view: 'library.html'
+        }
     }, {
         path: 'livetv/guide',
         pageProps: {
@@ -16,6 +23,13 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'livetvguideprovider',
             view: 'livetvguideprovider.html'
         }
+    }, {
+        path: 'livetv',
+        pageProps: {
+            appType: AppType.Dashboard,
+            controller: 'livetvstatus',
+            view: 'livetvstatus.html'
+        }
     }, {
         path: 'livetv/tuner',
         pageProps: {

src/apps/dashboard/routes/activity/index.tsx

@@ -2,10 +2,9 @@ import parseISO from 'date-fns/parseISO';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
-import { useTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -54,8 +53,6 @@ export const Component = () => {
 
     const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
 
-    const theme = useTheme();
-
     const UserCell = getUserCell(users);
 
     const activityParams = useMemo(() => ({
@@ -159,15 +156,8 @@ export const Component = () => {
         }
     }, [ activityView, searchParams, setSearchParams ]);
 
-    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
-    // https://github.com/KevinVandy/material-react-table/issues/1429
-    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
-        baseBackgroundColor: theme.palette.background.paper
-    }), [ theme ]);
-
     const table = useMaterialReactTable({
         ...DEFAULT_TABLE_OPTIONS,
-        mrtTheme,
 
         columns,
         data: logEntries,

src/apps/dashboard/routes/backups/index.tsx

@@ -102,7 +102,7 @@ export const Component = () => {
                     }).catch(() => {
                         // Server is still down
                     });
-            }, 45000);
+            }, 5000);
 
             return () => {
                 clearInterval(serverCheckInterval);

src/apps/dashboard/routes/branding/index.tsx

@@ -292,7 +292,6 @@ export const Component = () => {
                             name={BrandingOption.CustomCss}
                             label={globalize.translate('LabelCustomCss')}
                             helperText={globalize.translate('LabelCustomCssHelp')}
-                            spellCheck={false}
                             value={brandingOptions?.CustomCss}
                             onChange={setBrandingOption}
                             slotProps={{

src/apps/dashboard/routes/devices/index.tsx

@@ -4,10 +4,9 @@ import Edit from '@mui/icons-material/Edit';
 import Box from '@mui/material/Box/Box';
 import Button from '@mui/material/Button/Button';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip/Tooltip';
 import parseISO from 'date-fns/parseISO';
-import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -42,7 +41,6 @@ export const Component = () => {
         data?.Items || []
     ), [ data ]);
     const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
-    const theme = useTheme();
 
     const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState(false);
     const [ isDeleteAllConfirmOpen, setIsDeleteAllConfirmOpen ] = useState(false);
@@ -139,15 +137,8 @@ export const Component = () => {
         }
     ], [ UserCell, userNames ]);
 
-    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
-    // https://github.com/KevinVandy/material-react-table/issues/1429
-    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
-        baseBackgroundColor: theme.palette.background.paper
-    }), [ theme ]);
-
     const mrTable = useMaterialReactTable({
         ...DEFAULT_TABLE_OPTIONS,
-        mrtTheme,
 
         columns,
         data: devices,
@@ -193,25 +184,16 @@ export const Component = () => {
         positionActionsColumn: 'last',
         displayColumnDefOptions: {
             'mrt-row-actions': {
-                header: '',
-                size: 100
+                header: ''
             }
         },
         renderRowActions: ({ row, table }) => {
             const isDeletable = api && row.original.Id && api.deviceInfo.id === row.original.Id;
             return (
-                <Box
-                    sx={{
-                        display: 'flex',
-                        gap: 1,
-                        '&&': {
-                            backgroundColor: 'transparent !important'
-                        }
-                    }}
-                >
+                <Box sx={{ display: 'flex', gap: 1 }}>
                     <Tooltip title={globalize.translate('Edit')}>
                         <IconButton
-                            // eslint-disable-next-line react/jsx-no-bind
+                        // eslint-disable-next-line react/jsx-no-bind
                             onClick={() => table.setEditingRow(row)}
                         >
                             <Edit />

src/apps/dashboard/routes/index.tsx

@@ -1,12 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import ServerPathWidget from '../components/widgets/ServerPathWidget';
 import ServerInfoWidget from '../components/widgets/ServerInfoWidget';
 import ActivityLogWidget from '../components/widgets/ActivityLogWidget';
 import AlertsLogWidget from '../components/widgets/AlertsLogWidget';
+import useTheme from '@mui/material/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import Stack from '@mui/material/Stack';
 import useShutdownServer from '../features/system/api/useShutdownServer';
 import useRestartServer from '../features/system/api/useRestartServer';
@@ -16,9 +18,11 @@ import RunningTasksWidget from '../components/widgets/RunningTasksWidget';
 import DevicesWidget from '../components/widgets/DevicesWidget';
 import { useStartTask } from '../features/tasks/api/useStartTask';
 import ItemCountsWidget from '../components/widgets/ItemCountsWidget';
-import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
 
 export const Component = () => {
+    const theme = useTheme();
+    const isMedium = useMediaQuery(theme.breakpoints.only('md'));
+    const isExtraLarge = useMediaQuery(theme.breakpoints.only('xl'));
     const [ isRestartConfirmDialogOpen, setIsRestartConfirmDialogOpen ] = useState(false);
     const [ isShutdownConfirmDialogOpen, setIsShutdownConfirmDialogOpen ] = useState(false);
     const startTask = useStartTask();
@@ -27,10 +31,6 @@ export const Component = () => {
 
     const { data: tasks } = useLiveTasks({ isHidden: false });
 
-    const librariesTask = useMemo(() => (
-        tasks?.find((value) => value.Key === 'RefreshLibrary')
-    ), [ tasks ]);
-
     const promptRestart = useCallback(() => {
         setIsRestartConfirmDialogOpen(true);
     }, []);
@@ -93,28 +93,36 @@ export const Component = () => {
             />
             <Box className='content-primary'>
                 <Grid container spacing={3}>
-                    <Grid item xs={12} md={7} lg={7} xl={6}>
+                    <Grid size={{ xs: 12, md: 12, lg: 8, xl: 6 }}>
                         <Stack spacing={3}>
                             <ServerInfoWidget
                                 onScanLibrariesClick={onScanLibraries}
                                 onRestartClick={promptRestart}
                                 onShutdownClick={promptShutdown}
-                                isScanning={librariesTask?.State !== TaskState.Idle}
                             />
                             <ItemCountsWidget />
                             <RunningTasksWidget tasks={tasks} />
                             <DevicesWidget />
                         </Stack>
                     </Grid>
-                    <Grid item xs={12} md={5} lg={5} xl={3}>
+                    <Grid size={{ xs: 12, md: 6, lg: 4, xl: 3 }}>
                         <ActivityLogWidget />
                     </Grid>
-                    <Grid item xs={12} md={6} lg={12} xl={3}>
-                        <Stack spacing={3}>
-                            <AlertsLogWidget />
-                            <ServerPathWidget />
-                        </Stack>
-                    </Grid>
+                    {isMedium || isExtraLarge ? (
+                        <Grid size={{ md: 6, xl: 3 }}>
+                            <Stack spacing={3}>
+                                <AlertsLogWidget />
+                                <ServerPathWidget />
+                            </Stack>
+                        </Grid>
+                    ) : (
+                        <Grid size={12}>
+                            <Stack spacing={3}>
+                                <AlertsLogWidget />
+                                <ServerPathWidget />
+                            </Stack>
+                        </Grid>
+                    )}
                 </Grid>
             </Box>
         </Page>

src/apps/dashboard/routes/keys/index.tsx

@@ -2,34 +2,31 @@ import type { AuthenticationInfo } from '@jellyfin/sdk/lib/generated-client/mode
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import parseISO from 'date-fns/parseISO';
-import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
-import React, { useCallback, useMemo, useState } from 'react';
+import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
+import React, { useCallback, useMemo } from 'react';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
 import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/table/TablePage';
 import { useApiKeys } from 'apps/dashboard/features/keys/api/useApiKeys';
 import { useRevokeKey } from 'apps/dashboard/features/keys/api/useRevokeKey';
 import { useCreateKey } from 'apps/dashboard/features/keys/api/useCreateKey';
+import confirm from 'components/confirm/confirm';
+import prompt from 'components/prompt/prompt';
+import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
-import InputDialog from 'components/InputDialog';
-import ConfirmDialog from 'components/ConfirmDialog';
 
 export const Component = () => {
-    const [ isCreateApiKeyPromptOpen, setIsCreateApiKeyPromptOpen ] = useState(false);
-    const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState(false);
-    const [ apiKeyToDelete, setApiKeyToDelete ] = useState('');
+    const { api } = useApi();
     const { data, isLoading } = useApiKeys();
     const keys = useMemo(() => (
         data?.Items || []
     ), [ data ]);
     const revokeKey = useRevokeKey();
     const createKey = useCreateKey();
-    const theme = useTheme();
 
     const columns = useMemo<MRT_ColumnDef<AuthenticationInfo>[]>(() => [
         {
@@ -52,15 +49,8 @@ export const Component = () => {
         }
     ], []);
 
-    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
-    // https://github.com/KevinVandy/material-react-table/issues/1429
-    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
-        baseBackgroundColor: theme.palette.background.paper
-    }), [ theme ]);
-
     const table = useMaterialReactTable({
         ...DEFAULT_TABLE_OPTIONS,
-        mrtTheme,
 
         columns,
         data: keys,
@@ -106,72 +96,41 @@ export const Component = () => {
     });
 
     const onRevokeKey = useCallback((accessToken: string) => {
-        setApiKeyToDelete(accessToken);
-        setIsConfirmDeleteOpen(true);
-    }, []);
+        if (!api) return;
+
+        confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
+            revokeKey.mutate({
+                key: accessToken
+            });
+        }).catch(err => {
+            console.error('[apikeys] failed to show confirmation dialog', err);
+        });
+    }, [api, revokeKey]);
 
     const showNewKeyPopup = useCallback(() => {
-        setIsCreateApiKeyPromptOpen(true);
-    }, []);
+        if (!api) return;
 
-    const onCreateApiKeyPromptClose = useCallback(() => {
-        setIsCreateApiKeyPromptOpen(false);
-    }, []);
-
-    const onConfirmDelete = useCallback(() => {
-        revokeKey.mutate({
-            key: apiKeyToDelete
-        }, {
-            onSettled: () => {
-                setApiKeyToDelete('');
-                setIsConfirmDeleteOpen(false);
-            }
+        prompt({
+            title: globalize.translate('HeaderNewApiKey'),
+            label: globalize.translate('LabelAppName'),
+            description: globalize.translate('LabelAppNameExample')
+        }).then((value) => {
+            createKey.mutate({
+                app: value
+            });
+        }).catch(() => {
+            // popup closed
         });
-    }, [ revokeKey, apiKeyToDelete ]);
-
-    const onConfirmDeleteCancel = useCallback(() => {
-        setApiKeyToDelete('');
-        setIsConfirmDeleteOpen(false);
-    }, []);
-
-    const onConfirmCreate = useCallback((name: string) => {
-        createKey.mutate({
-            app: name
-        }, {
-            onSettled: () => {
-                setIsCreateApiKeyPromptOpen(false);
-            }
-        });
-    }, [ createKey ]);
+    }, [api, createKey]);
 
     return (
-        <>
-            <ConfirmDialog
-                open={isConfirmDeleteOpen}
-                title={globalize.translate('HeaderConfirmRevokeApiKey')}
-                text={globalize.translate('MessageConfirmRevokeApiKey')}
-                confirmButtonColor='error'
-                confirmButtonText={globalize.translate('Delete')}
-                onConfirm={onConfirmDelete}
-                onCancel={onConfirmDeleteCancel}
-            />
-            <InputDialog
-                open={isCreateApiKeyPromptOpen}
-                title={globalize.translate('HeaderNewApiKey')}
-                label={globalize.translate('LabelAppName')}
-                helperText={globalize.translate('LabelAppNameExample')}
-                confirmButtonText={globalize.translate('Create')}
-                onConfirm={onConfirmCreate}
-                onClose={onCreateApiKeyPromptClose}
-            />
-            <TablePage
-                id='apiKeysPage'
-                title={globalize.translate('HeaderApiKeys')}
-                subtitle={globalize.translate('HeaderApiKeysHelp')}
-                className='mainAnimatedPage type-interior'
-                table={table}
-            />
-        </>
+        <TablePage
+            id='apiKeysPage'
+            title={globalize.translate('HeaderApiKeys')}
+            subtitle={globalize.translate('HeaderApiKeysHelp')}
+            className='mainAnimatedPage type-interior'
+            table={table}
+        />
     );
 };
 

src/apps/dashboard/routes/libraries/index.tsx

@@ -1,108 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import Page from 'components/Page';
-import globalize from 'lib/globalize';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import { useVirtualFolders } from 'apps/dashboard/features/libraries/api/useVirtualFolders';
-import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
-import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask';
-import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
-import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
-import Grid from '@mui/material/Grid';
-import LibraryCard from 'apps/dashboard/features/libraries/components/LibraryCard';
-import Loading from 'components/loading/LoadingComponent';
-import MediaLibraryCreator from 'components/mediaLibraryCreator/mediaLibraryCreator';
-import getCollectionTypeOptions from 'apps/dashboard/features/libraries/utils/collectionTypeOptions';
-import { queryClient } from 'utils/query/queryClient';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import Add from '@mui/icons-material/Add';
-
-export const Component = () => {
-    const { data: virtualFolders, isPending: isVirtualFoldersPending } = useVirtualFolders();
-    const startTask = useStartTask();
-    const { data: tasks, isPending: isLiveTasksPending } = useLiveTasks({ isHidden: false });
-
-    const librariesTask = useMemo(() => (
-        tasks?.find((value) => value.Key === 'RefreshLibrary')
-    ), [ tasks ]);
-
-    const showMediaLibraryCreator = useCallback(() => {
-        const mediaLibraryCreator = new MediaLibraryCreator({
-            collectionTypeOptions: getCollectionTypeOptions(),
-            refresh: true
-        }) as Promise<boolean>;
-
-        void mediaLibraryCreator.then((hasChanges: boolean) => {
-            if (hasChanges) {
-                void queryClient.invalidateQueries({
-                    queryKey: ['VirtualFolders']
-                });
-            }
-        });
-    }, []);
-
-    const onScanLibraries = useCallback(() => {
-        if (librariesTask?.Id) {
-            startTask.mutate({
-                taskId: librariesTask.Id
-            });
-        }
-    }, [ startTask, librariesTask ]);
-
-    if (isVirtualFoldersPending || isLiveTasksPending) return <Loading />;
-
-    return (
-        <Page
-            id='mediaLibraryPage'
-            title={globalize.translate('HeaderLibraries')}
-            className='mainAnimatedPage type-interior'
-        >
-            <Box className='content-primary'>
-                <Stack spacing={3} mt={2}>
-                    <Stack direction='row' alignItems={'center'} spacing={1.5}>
-                        <Button
-                            startIcon={<Add />}
-                            onClick={showMediaLibraryCreator}
-                        >
-                            {globalize.translate('ButtonAddMediaLibrary')}
-                        </Button>
-                        <Button
-                            onClick={onScanLibraries}
-                            startIcon={<RefreshIcon />}
-                            loading={librariesTask && librariesTask.State !== TaskState.Idle}
-                            loadingPosition='start'
-                            variant='outlined'
-                        >
-                            {globalize.translate('ButtonScanAllLibraries')}
-                        </Button>
-                        {(librariesTask && librariesTask.State == TaskState.Running) && (
-                            <TaskProgress task={librariesTask} />
-                        )}
-                    </Stack>
-
-                    <Box>
-                        <Grid container spacing={2}>
-                            {virtualFolders?.map(virtualFolder => (
-                                <Grid
-                                    key={virtualFolder?.ItemId}
-                                    item
-                                    xs={12}
-                                    sm={6}
-                                    md={3}
-                                    lg={2.4}
-                                >
-                                    <LibraryCard
-                                        virtualFolder={virtualFolder}
-                                    />
-                                </Grid>
-                            ))}
-                        </Grid>
-                    </Box>
-                </Stack>
-            </Box>
-        </Page>
-    );
-};
-
-Component.displayName = 'LibrariesPage';

src/apps/dashboard/routes/livetv/index.tsx

@@ -1,179 +0,0 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import Box from '@mui/material/Box';
-import Page from 'components/Page';
-import { useNamedConfiguration } from 'hooks/useNamedConfiguration';
-import type { LiveTvOptions } from '@jellyfin/sdk/lib/generated-client/models/live-tv-options';
-import globalize from 'lib/globalize';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Loading from 'components/loading/LoadingComponent';
-import TunerDeviceCard from 'apps/dashboard/features/livetv/components/TunerDeviceCard';
-import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
-import Button from '@mui/material/Button';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import AddIcon from '@mui/icons-material/Add';
-import { Link, useNavigate } from 'react-router-dom';
-import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask';
-import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
-import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemText from '@mui/material/ListItemText';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import Provider from 'apps/dashboard/features/livetv/components/Provider';
-import Grid from '@mui/material/Grid';
-
-const CONFIG_KEY = 'livetv';
-
-export const Component = () => {
-    const navigate = useNavigate();
-    const {
-        data: config,
-        isPending: isConfigPending,
-        isError: isConfigError
-    } = useNamedConfiguration<LiveTvOptions>(CONFIG_KEY);
-    const {
-        data: tasks,
-        isPending: isTasksPending,
-        isError: isTasksError
-    } = useLiveTasks({ isHidden: false });
-    const providerButtonRef = useRef<HTMLButtonElement | null>(null);
-    const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
-    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
-    const startTask = useStartTask();
-
-    const navigateToSchedulesDirect = useCallback(() => {
-        navigate('/dashboard/livetv/guide?type=schedulesdirect');
-    }, [ navigate ]);
-
-    const navigateToXMLTV = useCallback(() => {
-        navigate('/dashboard/livetv/guide?type=xmltv');
-    }, [ navigate ]);
-
-    const showProviderMenu = useCallback(() => {
-        setAnchorEl(providerButtonRef.current);
-        setIsMenuOpen(true);
-    }, []);
-
-    const onMenuClose = useCallback(() => {
-        setAnchorEl(null);
-        setIsMenuOpen(false);
-    }, []);
-
-    const refreshGuideTask = useMemo(() => (
-        tasks?.find((value) => value.Key === 'RefreshGuide')
-    ), [ tasks ]);
-
-    const refreshGuideData = useCallback(() => {
-        if (refreshGuideTask?.Id) {
-            startTask.mutate({
-                taskId: refreshGuideTask.Id
-            });
-        }
-    }, [ startTask, refreshGuideTask ]);
-
-    if (isConfigPending || isTasksPending) return <Loading />;
-
-    return (
-        <Page
-            id='liveTvStatusPage'
-            title={globalize.translate('LiveTV')}
-            className='mainAnimatedPage type-interior'
-        >
-            <Box className='content-primary'>
-                {(isConfigError || isTasksError) ? (
-                    <Alert severity='error'>{globalize.translate('HeaderError')}</Alert>
-                ) : (
-                    <Stack spacing={3}>
-                        <Typography variant='h2'>{globalize.translate('HeaderTunerDevices')}</Typography>
-
-                        <Button
-                            sx={{ alignSelf: 'flex-start' }}
-                            startIcon={<AddIcon />}
-                            component={Link}
-                            to='/dashboard/livetv/tuner'
-                        >
-                            {globalize.translate('ButtonAddTunerDevice')}
-                        </Button>
-
-                        <Box>
-                            <Grid container spacing={2}>
-                                {config.TunerHosts?.map(tunerHost => (
-                                    <Grid
-                                        key={tunerHost.Id}
-                                        item
-                                        xs={12}
-                                        sm={6}
-                                        md={3}
-                                        lg={2.4}
-                                    >
-                                        <TunerDeviceCard
-                                            key={tunerHost.Id}
-                                            tunerHost={tunerHost}
-                                        />
-                                    </Grid>
-                                ))}
-                            </Grid>
-                        </Box>
-
-                        <Typography variant='h2'>{globalize.translate('HeaderGuideProviders')}</Typography>
-
-                        <Stack sx={{ alignSelf: 'flex-start' }} spacing={2}>
-                            <Stack direction='row' spacing={1.5}>
-                                <Button
-                                    sx={{ alignSelf: 'flex-start' }}
-                                    startIcon={<AddIcon />}
-                                    onClick={showProviderMenu}
-                                    ref={providerButtonRef}
-                                >
-                                    {globalize.translate('ButtonAddProvider')}
-                                </Button>
-                                <Button
-                                    sx={{ alignSelf: 'flex-start' }}
-                                    startIcon={<RefreshIcon />}
-                                    variant='outlined'
-                                    onClick={refreshGuideData}
-                                    loading={refreshGuideTask && refreshGuideTask.State === TaskState.Running}
-                                    loadingPosition='start'
-                                >
-                                    {globalize.translate('ButtonRefreshGuideData')}
-                                </Button>
-                            </Stack>
-
-                            {(refreshGuideTask && refreshGuideTask.State === TaskState.Running) && (
-                                <TaskProgress task={refreshGuideTask} />
-                            )}
-                        </Stack>
-
-                        <Menu
-                            anchorEl={anchorEl}
-                            open={isMenuOpen}
-                            onClose={onMenuClose}
-                        >
-                            <MenuItem onClick={navigateToSchedulesDirect}>
-                                <ListItemText>Schedules Direct</ListItemText>
-                            </MenuItem>
-                            <MenuItem onClick={navigateToXMLTV}>
-                                <ListItemText>XMLTV</ListItemText>
-                            </MenuItem>
-                        </Menu>
-
-                        {(config.ListingProviders && config.ListingProviders?.length > 0) && (
-                            <List sx={{ backgroundColor: 'background.paper' }}>
-                                {config.ListingProviders?.map(provider => (
-                                    <Provider
-                                        key={provider.Id}
-                                        provider={provider}
-                                    />
-                                ))}
-                            </List>
-                        )}
-                    </Stack>
-                )}
-            </Box>
-        </Page>
-    );
-};
-
-Component.displayName = 'LiveTvPage';

src/apps/dashboard/routes/logs/file.tsx

@@ -1,6 +1,6 @@
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { useServerLog } from 'apps/dashboard/features/logs/api/useServerLog';
 import Alert from '@mui/material/Alert';
@@ -13,8 +13,8 @@ import Typography from '@mui/material/Typography';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import FileDownload from '@mui/icons-material/FileDownload';
 import globalize from 'lib/globalize';
+import toast from 'components/toast/toast';
 import { copy } from 'scripts/clipboard';
-import Toast from 'apps/dashboard/components/Toast';
 
 export const Component = () => {
     const { file: fileName } = useParams();
@@ -24,18 +24,13 @@ export const Component = () => {
         data: log,
         refetch
     } = useServerLog(fileName ?? '');
-    const [ isCopiedToastOpen, setIsCopiedToastOpen ] = useState(false);
 
     const retry = useCallback(() => refetch(), [refetch]);
 
-    const handleToastClose = useCallback(() => {
-        setIsCopiedToastOpen(false);
-    }, []);
-
     const copyToClipboard = useCallback(async () => {
         if (log) {
             await copy(log);
-            setIsCopiedToastOpen(true);
+            toast({ text: globalize.translate('CopyLogSuccess') });
         }
     }, [log]);
 
@@ -57,12 +52,7 @@ export const Component = () => {
             title={fileName}
             className='mainAnimatedPage type-interior'
         >
-            <Toast
-                open={isCopiedToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('CopyLogSuccess')}
-            />
-            <Container className='content-primary' maxWidth={false}>
+            <Container className='content-primary'>
                 <Box>
                     <Typography variant='h1'>{fileName}</Typography>
 
@@ -106,14 +96,7 @@ export const Component = () => {
 
                             <Paper sx={{ mt: 2 }}>
                                 <code>
-                                    <pre style={{
-                                        overflow:'auto',
-                                        margin: 0,
-                                        padding: '16px',
-                                        whiteSpace: 'pre-wrap'
-                                    }}>
-                                        {log}
-                                    </pre>
+                                    <pre style={{ overflow:'auto', margin: 0, padding: '16px' }}>{log}</pre>
                                 </code>
                             </Paper>
                         </>

src/apps/dashboard/routes/playback/transcoding.tsx

@@ -471,21 +471,19 @@ export const Component = () => {
 
                             {(hardwareAccelType === 'none' || isHwaSelected) && (
                                 <>
-                                    {isHwaSelected && (
-                                        <FormControl>
-                                            <FormControlLabel
-                                                label={globalize.translate('EnableTonemapping')}
-                                                control={
-                                                    <Checkbox
-                                                        name='EnableTonemapping'
-                                                        checked={config.EnableTonemapping}
-                                                        onChange={onCheckboxChange}
-                                                    />
-                                                }
-                                            />
-                                            <FormHelperText>{globalize.translate('AllowTonemappingHelp')}</FormHelperText>
-                                        </FormControl>
-                                    )}
+                                    <FormControl>
+                                        <FormControlLabel
+                                            label={globalize.translate('EnableTonemapping')}
+                                            control={
+                                                <Checkbox
+                                                    name='EnableTonemapping'
+                                                    checked={config.EnableTonemapping}
+                                                    onChange={onCheckboxChange}
+                                                />
+                                            }
+                                        />
+                                        <FormHelperText>{globalize.translate(isHwaSelected ? 'AllowTonemappingHelp' : 'AllowTonemappingSoftwareHelp')}</FormHelperText>
+                                    </FormControl>
 
                                     <TextField
                                         name='TonemappingAlgorithm'

src/apps/dashboard/routes/plugins/catalog.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import Page from 'components/Page';
+import globalize from 'lib/globalize';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { usePackages } from 'apps/dashboard/features/plugins/api/usePackages';
+import Loading from 'components/loading/LoadingComponent';
+import getPackageCategories from 'apps/dashboard/features/plugins/utils/getPackageCategories';
+import Stack from '@mui/material/Stack';
+import getPackagesByCategory from 'apps/dashboard/features/plugins/utils/getPackagesByCategory';
+import PackageCard from 'apps/dashboard/features/plugins/components/PackageCard';
+import Grid from '@mui/material/Grid2';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import Settings from '@mui/icons-material/Settings';
+import { Link } from 'react-router-dom';
+import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
+
+export const Component = () => {
+    const { data: packages, isPending: isPackagesPending } = usePackages();
+    const [ searchQuery, setSearchQuery ] = useState('');
+
+    const filteredPackages = useMemo(() => {
+        return packages?.filter(i => i.name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()));
+    }, [ packages, searchQuery ]);
+
+    const packageCategories = getPackageCategories(filteredPackages);
+
+    const updateSearchQuery = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchQuery(e.target.value);
+    }, []);
+
+    const getCategoryLabel = (category: string) => {
+        const categoryKey = category.replace(/\s/g, '');
+
+        if (CATEGORY_LABELS[categoryKey]) {
+            return globalize.translate(CATEGORY_LABELS[categoryKey]);
+        }
+
+        console.warn('[AvailablePlugins] unmapped category label', category);
+        return category;
+    };
+
+    if (isPackagesPending) {
+        return <Loading />;
+    }
+
+    return (
+        <Page
+            id='pluginCatalogPage'
+            className='mainAnimatedPage type-interior'
+            title={globalize.translate('TabCatalog')}
+        >
+            <Box className='content-primary'>
+                <Stack spacing={3}>
+                    <Stack direction='row' gap={1}>
+                        <Typography variant='h1'>{globalize.translate('TabCatalog')}</Typography>
+                        <IconButton
+                            component={Link}
+                            to='/dashboard/plugins/repositories'
+                            sx={{
+                                backgroundColor: 'background.paper'
+                            }}
+                        >
+                            <Settings />
+                        </IconButton>
+                    </Stack>
+
+                    <TextField
+                        label={globalize.translate('Search')}
+                        value={searchQuery}
+                        onChange={updateSearchQuery}
+                    />
+
+                    {packageCategories.map(category => (
+                        <Stack key={category} spacing={2}>
+                            <Typography variant='h2'>{getCategoryLabel(category)}</Typography>
+
+                            <Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
+                                {getPackagesByCategory(filteredPackages, category).map(pkg => (
+                                    <Grid key={pkg.guid} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
+                                        <PackageCard
+                                            pkg={pkg}
+                                        />
+                                    </Grid>
+                                ))}
+                            </Grid>
+                        </Stack>
+                    ))}
+                </Stack>
+            </Box>
+        </Page>
+    );
+};
+
+Component.displayName = 'PluginsCatalogPage';

src/apps/dashboard/routes/plugins/index.tsx

@@ -1,93 +1,44 @@
-import Alert from '@mui/material/Alert';
+import React, { useCallback, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import React, { useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
-
-import SearchInput from 'apps/dashboard/components/SearchInput';
-import { usePluginDetails } from 'apps/dashboard/features/plugins/api/usePluginDetails';
-import NoPluginResults from 'apps/dashboard/features/plugins/components/NoPluginResults';
-import PluginCard from 'apps/dashboard/features/plugins/components/PluginCard';
-import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
-import { PluginCategory } from 'apps/dashboard/features/plugins/constants/pluginCategory';
-import { PluginStatusOption } from 'apps/dashboard/features/plugins/constants/pluginStatusOption';
-import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
-import useSearchParam from 'hooks/useSearchParam';
 import globalize from 'lib/globalize';
-
-/**
- * The list of primary/main categories.
- * Any category not in this list will be added to the "other" category.
- */
-const MAIN_CATEGORIES = [
-    PluginCategory.Administration.toLowerCase(),
-    PluginCategory.General.toLowerCase(),
-    PluginCategory.Anime.toLowerCase(),
-    PluginCategory.Books.toLowerCase(),
-    PluginCategory.LiveTV.toLowerCase(),
-    PluginCategory.MoviesAndShows.toLowerCase(),
-    PluginCategory.Music.toLowerCase(),
-    PluginCategory.Subtitles.toLowerCase()
-];
-
-const CATEGORY_PARAM = 'category';
-const QUERY_PARAM = 'query';
-const STATUS_PARAM = 'status';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { usePlugins } from 'apps/dashboard/features/plugins/api/usePlugins';
+import Loading from 'components/loading/LoadingComponent';
+import Alert from '@mui/material/Alert';
+import Grid from '@mui/material/Grid2';
+import PluginCard from 'apps/dashboard/features/plugins/components/PluginCard';
+import { useConfigurationPages } from 'apps/dashboard/features/plugins/api/useConfigurationPages';
+import { findBestConfigurationPage } from 'apps/dashboard/features/plugins/api/configurationPage';
 
 export const Component = () => {
     const {
-        data: pluginDetails,
-        isError,
-        isPending
-    } = usePluginDetails();
-    const [ category, setCategory ] = useSearchParam(CATEGORY_PARAM);
-    const [ searchQuery, setSearchQuery ] = useSearchParam(QUERY_PARAM);
-    const [ status, setStatus ] = useSearchParam(STATUS_PARAM, PluginStatusOption.Installed);
+        data: plugins,
+        isPending,
+        isError
+    } = usePlugins();
+    const {
+        data: configurationPages,
+        isError: isConfigurationPagesError,
+        isPending: isConfigurationPagesPending
+    } = useConfigurationPages();
+    const [ searchQuery, setSearchQuery ] = useState('');
 
     const onSearchChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         setSearchQuery(event.target.value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const onViewAll = useCallback(() => {
-        if (category) setCategory('');
-        else setStatus(PluginStatusOption.All);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ category ]);
-
     const filteredPlugins = useMemo(() => {
-        if (pluginDetails) {
-            let filtered = pluginDetails;
-
-            if (status === PluginStatusOption.Installed) {
-                filtered = filtered.filter(p => p.status);
-            } else if (status === PluginStatusOption.Available) {
-                filtered = filtered.filter(p => !p.status);
-            }
-
-            if (category) {
-                if (category === PluginCategory.Other.toLowerCase()) {
-                    filtered = filtered.filter(p => (
-                        p.category && !MAIN_CATEGORIES.includes(p.category.toLowerCase())
-                    ));
-                } else {
-                    filtered = filtered.filter(p => p.category?.toLowerCase() === category);
-                }
-            }
-            return filtered
-                .filter(i => i.name?.toLowerCase().includes(searchQuery.toLowerCase()));
+        if (plugins) {
+            return plugins.filter(i => i.Name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()));
         } else {
             return [];
         }
-    }, [ category, pluginDetails, searchQuery, status ]);
+    }, [ plugins, searchQuery ]);
 
-    if (isPending) {
+    if (isPending || isConfigurationPagesPending) {
         return <Loading />;
     }
 
@@ -98,161 +49,31 @@ export const Component = () => {
             className='type-interior mainAnimatedPage'
         >
             <Box className='content-primary'>
-                {isError ? (
-                    <Alert
-                        severity='error'
-                        sx={{ marginBottom: 2 }}
-                    >
-                        {globalize.translate('PluginsLoadError')}
-                    </Alert>
+                {isError || isConfigurationPagesError ? (
+                    <Alert severity='error'>{globalize.translate('PluginsLoadError')}</Alert>
                 ) : (
-                    <Stack spacing={2}>
-                        <Stack
-                            direction='row'
-                            sx={{
-                                flexWrap: {
-                                    xs: 'wrap',
-                                    sm: 'nowrap'
-                                }
-                            }}
-                        >
-                            <Typography
-                                variant='h1'
-                                component='span'
-                                sx={{
-                                    flexGrow: 1,
-                                    verticalAlign: 'middle'
-                                }}
-                            >
-                                {globalize.translate('TabPlugins')}
-                            </Typography>
+                    <Stack spacing={3}>
+                        <Typography variant='h1'>
+                            {globalize.translate('TabMyPlugins')}
+                        </Typography>
 
-                            <Button
-                                component={Link}
-                                to='/dashboard/plugins/repositories'
-                                variant='outlined'
-                                sx={{
-                                    marginLeft: 2
-                                }}
-                            >
-                                {globalize.translate('ManageRepositories')}
-                            </Button>
-
-                            <Box
-                                sx={{
-                                    display: 'flex',
-                                    justifyContent: 'end',
-                                    marginTop: {
-                                        xs: 2,
-                                        sm: 0
-                                    },
-                                    marginLeft: {
-                                        xs: 0,
-                                        sm: 2
-                                    },
-                                    width: {
-                                        xs: '100%',
-                                        sm: 'auto'
-                                    }
-                                }}
-                            >
-                                <SearchInput
-                                    label={globalize.translate('Search')}
-                                    value={searchQuery}
-                                    onChange={onSearchChange}
-                                />
-                            </Box>
-                        </Stack>
+                        <TextField
+                            label={globalize.translate('Search')}
+                            value={searchQuery}
+                            onChange={onSearchChange}
+                        />
 
                         <Box>
-                            <Stack
-                                direction='row'
-                                spacing={1}
-                                sx={{
-                                    marginLeft: '-1rem',
-                                    marginRight: '-1rem',
-                                    paddingLeft: '1rem',
-                                    paddingRight: '1rem',
-                                    paddingBottom: {
-                                        xs: 1,
-                                        md: 0.5
-                                    },
-                                    overflowX: 'auto'
-                                }}
-                            >
-                                <Chip
-                                    color={status === PluginStatusOption.All ? 'primary' : undefined}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => setStatus(PluginStatusOption.All)}
-                                    label={globalize.translate('All')}
-                                />
-
-                                <Chip
-                                    color={status === PluginStatusOption.Available ? 'primary' : undefined}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => setStatus(PluginStatusOption.Available)}
-                                    label={globalize.translate('LabelAvailable')}
-                                />
-
-                                <Chip
-                                    color={status === PluginStatusOption.Installed ? 'primary' : undefined}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => setStatus(PluginStatusOption.Installed)}
-                                    label={globalize.translate('LabelInstalled')}
-                                />
-
-                                <Divider orientation='vertical' flexItem />
-
-                                <Chip
-                                    color={!category ? 'primary' : undefined}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => setCategory('')}
-                                    label={globalize.translate('All')}
-                                />
-
-                                {Object.values(PluginCategory).map(c => (
-                                    <Chip
-                                        key={c}
-                                        color={category === c.toLowerCase() ? 'primary' : undefined}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        onClick={() => setCategory(c.toLowerCase())}
-                                        label={globalize.translate(CATEGORY_LABELS[c as PluginCategory])}
-                                    />
+                            <Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
+                                {filteredPlugins.map(plugin => (
+                                    <Grid key={plugin.Id} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
+                                        <PluginCard
+                                            plugin={plugin}
+                                            configurationPage={findBestConfigurationPage(configurationPages, plugin.Id || '')}
+                                        />
+                                    </Grid>
                                 ))}
-                            </Stack>
-                            <Divider />
-                        </Box>
-
-                        <Box>
-                            {filteredPlugins.length > 0 ? (
-                                // NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
-                                // eslint-disable-next-line @typescript-eslint/no-deprecated
-                                <Grid container spacing={2}>
-                                    {filteredPlugins.map(plugin => (
-                                        // NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
-                                        // eslint-disable-next-line @typescript-eslint/no-deprecated
-                                        <Grid
-                                            key={plugin.id}
-                                            item
-                                            xs={12}
-                                            sm={6}
-                                            md={4}
-                                            lg={3}
-                                            xl={2}
-                                        >
-                                            <PluginCard
-                                                plugin={plugin}
-                                            />
-                                        </Grid>
-                                    ))}
-                                </Grid>
-                            ) : (
-                                <NoPluginResults
-                                    isFiltered={!!category || status !== PluginStatusOption.All}
-                                    onViewAll={onViewAll}
-                                    query={searchQuery}
-                                />
-                            )}
+                            </Grid>
                         </Box>
                     </Stack>
                 )}

src/apps/dashboard/routes/plugins/plugin.tsx

@@ -1,15 +1,15 @@
 import { PluginStatus } from '@jellyfin/sdk/lib/generated-client/models/plugin-status';
 import type { VersionInfo } from '@jellyfin/sdk/lib/generated-client/models/version-info';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
-import Grid from '@mui/material/Grid';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
+import Alert from '@mui/material/Alert/Alert';
+import Button from '@mui/material/Button/Button';
+import Container from '@mui/material/Container/Container';
+import FormControlLabel from '@mui/material/FormControlLabel/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup/FormGroup';
+import Grid from '@mui/material/Grid2/Grid2';
+import Skeleton from '@mui/material/Skeleton/Skeleton';
+import Stack from '@mui/material/Stack/Stack';
+import Switch from '@mui/material/Switch/Switch';
+import Typography from '@mui/material/Typography/Typography';
 import Delete from '@mui/icons-material/Delete';
 import Download from '@mui/icons-material/Download';
 import Extension from '@mui/icons-material/Extension';
@@ -56,7 +56,6 @@ const PluginPage: FC = () => {
 
     const [ isEnabledOverride, setIsEnabledOverride ] = useState<boolean>();
     const [ isInstallConfirmOpen, setIsInstallConfirmOpen ] = useState(false);
-    const [ isInstalling, setIsInstalling ] = useState(false);
     const [ isUninstallConfirmOpen, setIsUninstallConfirmOpen ] = useState(false);
     const [ pendingInstallVersion, setPendingInstallVersion ] = useState<VersionInfo>();
 
@@ -116,7 +115,7 @@ const PluginPage: FC = () => {
                 isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart)
                     ?? pluginInfo?.Status !== PluginStatus.Disabled,
                 name: pluginName || pluginInfo?.Name || packageInfo?.name,
-                owner: pluginInfo?.CanUninstall === false ? 'jellyfin' : packageInfo?.owner,
+                owner: packageInfo?.owner,
                 status: pluginInfo?.Status,
                 configurationPage: findBestConfigurationPage(configurationPages || [], pluginId),
                 version,
@@ -169,8 +168,7 @@ const PluginPage: FC = () => {
             alerts.push({ messageKey: 'PluginLoadConfigError' });
         }
 
-        // Don't show package load error for built-in plugins
-        if (!isPluginsLoading && pluginDetails?.canUninstall && isPackageInfoError) {
+        if (isPackageInfoError) {
             alerts.push({
                 severity: 'warning',
                 messageKey: 'PluginLoadRepoError'
@@ -190,8 +188,6 @@ const PluginPage: FC = () => {
         isConfigurationPagesError,
         isPackageInfoError,
         isPluginsError,
-        isPluginsLoading,
-        pluginDetails?.canUninstall,
         uninstallPlugin.isError
     ]);
 
@@ -247,7 +243,6 @@ const PluginPage: FC = () => {
 
         console.debug('[PluginPage] installing plugin', installVersion);
 
-        setIsInstalling(true);
         installPlugin.mutate({
             name: pluginDetails.name,
             assemblyGuid: pluginDetails.id,
@@ -255,7 +250,6 @@ const PluginPage: FC = () => {
             repositoryUrl: installVersion.repositoryUrl
         }, {
             onSettled: () => {
-                setIsInstalling(false);
                 setPendingInstallVersion(undefined);
                 disablePlugin.reset();
                 enablePlugin.reset();
@@ -316,17 +310,13 @@ const PluginPage: FC = () => {
             <Container className='content-primary'>
 
                 {alertMessages.map(({ severity = 'error', messageKey }) => (
-                    <Alert
-                        key={messageKey}
-                        severity={severity}
-                        sx={{ marginBottom: 2 }}
-                    >
+                    <Alert key={messageKey} severity={severity}>
                         {globalize.translate(messageKey)}
                     </Alert>
                 ))}
 
                 <Grid container spacing={2} sx={{ marginTop: 0 }}>
-                    <Grid item xs={12} lg={8}>
+                    <Grid size={{ xs: 12, lg: 8 }}>
                         <Stack spacing={2}>
                             <Typography variant='h1'>
                                 {pluginDetails?.name || pluginName}
@@ -342,7 +332,7 @@ const PluginPage: FC = () => {
                         </Stack>
                     </Grid>
 
-                    <Grid item lg={4} sx={{ display: { xs: 'none', lg: 'initial' } }}>
+                    <Grid size={{ lg: 4 }} sx={{ display: { xs: 'none', lg: 'initial' } }}>
                         <Image
                             isLoading={isLoading}
                             alt={pluginDetails?.name}
@@ -351,7 +341,7 @@ const PluginPage: FC = () => {
                         />
                     </Grid>
 
-                    <Grid item xs={12} lg={8} sx={{ order: { xs: 1, lg: 'initial' } }}>
+                    <Grid size={{ xs: 12, lg: 8 }} sx={{ order: { xs: 1, lg: 'initial' } }}>
                         {!!pluginDetails?.versions.length && (
                             <>
                                 <Typography variant='h3' sx={{ marginBottom: 2 }}>
@@ -365,7 +355,7 @@ const PluginPage: FC = () => {
                         )}
                     </Grid>
 
-                    <Grid item xs={12} lg={4}>
+                    <Grid size={{ xs: 12, lg: 4 }}>
                         <Stack spacing={2} direction={{ xs: 'column', sm: 'row-reverse', lg: 'column' }}>
                             <Stack spacing={1} sx={{ flexBasis: '50%' }}>
                                 {!isLoading && !pluginDetails?.status && (
@@ -377,7 +367,6 @@ const PluginPage: FC = () => {
                                         <Button
                                             startIcon={<Download />}
                                             onClick={onInstall()}
-                                            loading={isInstalling}
                                         >
                                             {globalize.translate('HeaderInstall')}
                                         </Button>

src/apps/dashboard/routes/routes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navigate, RouteObject } from 'react-router-dom';
+import { RouteObject } from 'react-router-dom';
 
 import ConnectionRequired from 'components/ConnectionRequired';
 import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
@@ -26,11 +26,7 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
                         path: DASHBOARD_APP_PATHS.Dashboard,
                         children: [
                             ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
-                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute),
-                            {
-                                path: 'plugins/catalog',
-                                element: <Navigate replace to='/dashboard/plugins' />
-                            }
+                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
                         ],
                         errorElement: <ErrorBoundary pageClasses={[ 'type-interior' ]} />
                     },

src/apps/dashboard/routes/tasks/task.tsx

@@ -7,11 +7,10 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import AddIcon from '@mui/icons-material/Add';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import Loading from 'components/loading/LoadingComponent';
-import { type MRT_ColumnDef, MRT_Table, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
+import { MRT_ColumnDef, MRT_Table, useMaterialReactTable } from 'material-react-table';
 import type { TaskTriggerInfo } from '@jellyfin/sdk/lib/generated-client/models/task-trigger-info';
 import globalize from '../../../../lib/globalize';
 import { useTask } from 'apps/dashboard/features/tasks/api/useTask';
@@ -27,7 +26,6 @@ export const Component = () => {
     const [ isAddTriggerDialogOpen, setIsAddTriggerDialogOpen ] = useState(false);
     const [ isRemoveConfirmOpen, setIsRemoveConfirmOpen ] = useState(false);
     const [ pendingDeleteTrigger, setPendingDeleteTrigger ] = useState<TaskTriggerInfo | null>(null);
-    const theme = useTheme();
 
     const onCloseRemoveConfirmDialog = useCallback(() => {
         setPendingDeleteTrigger(null);
@@ -82,15 +80,7 @@ export const Component = () => {
         }
     ], []);
 
-    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
-    // https://github.com/KevinVandy/material-react-table/issues/1429
-    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
-        baseBackgroundColor: theme.palette.background.paper
-    }), [ theme ]);
-
     const table = useMaterialReactTable({
-        mrtTheme,
-
         columns,
         data: task?.Triggers || [],
 

src/apps/dashboard/routes/users/access.tsx

@@ -4,13 +4,13 @@ import { useSearchParams } from 'react-router-dom';
 
 import loading from '../../../../components/loading/loading';
 import globalize from '../../../../lib/globalize';
+import toast from '../../../../components/toast/toast';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
-import Toast from 'apps/dashboard/components/Toast';
 
 type ItemsArr = {
     Name?: string | null;
@@ -23,7 +23,6 @@ type ItemsArr = {
 const UserLibraryAccess = () => {
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
-    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
     const [ userName, setUserName ] = useState('');
     const [channelsItems, setChannelsItems] = useState<ItemsArr[]>([]);
     const [mediaFoldersItems, setMediaFoldersItems] = useState<ItemsArr[]>([]);
@@ -32,10 +31,6 @@ const UserLibraryAccess = () => {
 
     const element = useRef<HTMLDivElement>(null);
 
-    const handleToastClose = useCallback(() => {
-        setIsSettingsSavedToastOpen(false);
-    }, []);
-
     const triggerChange = (select: HTMLInputElement) => {
         const evt = new Event('change', { bubbles: false, cancelable: true });
         select.dispatchEvent(evt);
@@ -225,7 +220,7 @@ const UserLibraryAccess = () => {
 
         const onSaveComplete = () => {
             loading.hide();
-            setIsSettingsSavedToastOpen(true);
+            toast(globalize.translate('SettingsSaved'));
         };
 
         (page.querySelector('.chkEnableAllDevices') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
@@ -248,11 +243,6 @@ const UserLibraryAccess = () => {
             id='userLibraryAccessPage'
             className='mainAnimatedPage type-interior'
         >
-            <Toast
-                open={isSettingsSavedToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('SettingsSaved')}
-            />
             <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer

src/apps/dashboard/routes/users/add.tsx

@@ -1,21 +1,21 @@
-import type { BaseItemDto, CreateUserByName } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 
+import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Input from '../../../../elements/emby-input/Input';
 import Button from '../../../../elements/emby-button/Button';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
-import Toast from 'apps/dashboard/components/Toast';
 
-import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
-import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
-import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
-import { useCreateUser } from 'apps/dashboard/features/users/api/useCreateUser';
-import { useNavigate } from 'react-router-dom';
+type UserInput = {
+    Name?: string;
+    Password?: string;
+};
 
 type ItemsArr = {
     Name?: string | null;
@@ -23,21 +23,10 @@ type ItemsArr = {
 };
 
 const UserNew = () => {
-    const navigate = useNavigate();
     const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
     const [ mediaFoldersItems, setMediaFoldersItems ] = useState<ItemsArr[]>([]);
-    const [ isErrorToastOpen, setIsErrorToastOpen ] = useState(false);
     const element = useRef<HTMLDivElement>(null);
 
-    const handleToastClose = useCallback(() => {
-        setIsErrorToastOpen(false);
-    }, []);
-    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders();
-    const { data: channels, isSuccess: isChannelsSuccess } = useChannels();
-
-    const createUser = useCreateUser();
-    const updateUserPolicy = useUpdateUserPolicy();
-
     const getItemsResult = (items: BaseItemDto[]) => {
         return items.map(item =>
             ({
@@ -55,7 +44,9 @@ const UserNew = () => {
             return;
         }
 
-        setMediaFoldersItems(getItemsResult(result));
+        const mediaFolders = getItemsResult(result);
+
+        setMediaFoldersItems(mediaFolders);
 
         const folderAccess = page.querySelector('.folderAccess') as HTMLDivElement;
         folderAccess.dispatchEvent(new CustomEvent('create'));
@@ -71,15 +62,15 @@ const UserNew = () => {
             return;
         }
 
-        const channelItems = getItemsResult(result);
+        const channels = getItemsResult(result);
 
-        setChannelsItems(channelItems);
+        setChannelsItems(channels);
 
         const channelAccess = page.querySelector('.channelAccess') as HTMLDivElement;
         channelAccess.dispatchEvent(new CustomEvent('create'));
 
         const channelAccessContainer = page.querySelector('.channelAccessContainer') as HTMLDivElement;
-        channelItems.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
+        channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
 
         (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked = false;
     }, []);
@@ -91,26 +82,22 @@ const UserNew = () => {
             console.error('Unexpected null reference');
             return;
         }
-        if (!mediaFolders?.Items) {
-            console.error('[add] mediaFolders not available');
-            return;
-        }
-        if (!channels?.Items) {
-            console.error('[add] channels not available');
-            return;
-        }
 
-        loadMediaFolders(mediaFolders?.Items);
-        loadChannels(channels?.Items);
-        loading.hide();
-    }, [loadChannels, loadMediaFolders, mediaFolders, channels]);
-
-    useEffect(() => {
+        (page.querySelector('#txtUsername') as HTMLInputElement).value = '';
+        (page.querySelector('#txtPassword') as HTMLInputElement).value = '';
         loading.show();
-        if (isMediaFoldersSuccess && isChannelsSuccess) {
-            loadUser();
-        }
-    }, [loadUser, isMediaFoldersSuccess, isChannelsSuccess]);
+        const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
+            IsHidden: false
+        }));
+        const promiseChannels = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
+        Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
+            loadMediaFolders(responses[0].Items);
+            loadChannels(responses[1].Items);
+            loading.hide();
+        }).catch(err => {
+            console.error('[usernew] failed to load data', err);
+        });
+    }, [loadChannels, loadMediaFolders]);
 
     useEffect(() => {
         const page = element.current;
@@ -120,54 +107,51 @@ const UserNew = () => {
             return;
         }
 
+        loadUser();
+
         const saveUser = () => {
-            const userInput: CreateUserByName = {
-                Name: (page.querySelector('#txtUsername') as HTMLInputElement).value,
-                Password: (page.querySelector('#txtPassword') as HTMLInputElement).value
-            };
-            createUser.mutate({ createUserByName: userInput }, {
-                onSuccess: (response) => {
-                    const user = response.data;
+            const userInput: UserInput = {};
+            userInput.Name = (page.querySelector('#txtUsername') as HTMLInputElement).value.trim();
+            userInput.Password = (page.querySelector('#txtPassword') as HTMLInputElement).value;
 
-                    if (!user.Id || !user.Policy) {
-                        throw new Error('Unexpected null user id or policy');
-                    }
+            window.ApiClient.createUser(userInput).then(function (user) {
+                if (!user.Id || !user.Policy) {
+                    throw new Error('Unexpected null user id or policy');
+                }
 
-                    user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
-                    user.Policy.EnabledFolders = [];
+                user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
+                user.Policy.EnabledFolders = [];
 
-                    if (!user.Policy.EnableAllFolders) {
-                        user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
-                            return i.checked;
-                        }).map(function (i) {
-                            return i.getAttribute('data-id');
-                        });
-                    }
-
-                    user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
-                    user.Policy.EnabledChannels = [];
-
-                    if (!user.Policy.EnableAllChannels) {
-                        user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
-                            return i.checked;
-                        }).map(function (i) {
-                            return i.getAttribute('data-id');
-                        });
-                    }
-
-                    updateUserPolicy.mutate({
-                        userId: user.Id,
-                        userPolicy: user.Policy
-                    }, {
-                        onSuccess: () => {
-                            navigate(`/dashboard/users/profile?userId=${user.Id}`);
-                        },
-                        onError: () => {
-                            console.error('[usernew] failed to update user policy');
-                            setIsErrorToastOpen(true);
-                        }
+                if (!user.Policy.EnableAllFolders) {
+                    user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
+                        return i.checked;
+                    }).map(function (i) {
+                        return i.getAttribute('data-id');
                     });
                 }
+
+                user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
+                user.Policy.EnabledChannels = [];
+
+                if (!user.Policy.EnableAllChannels) {
+                    user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
+                        return i.checked;
+                    }).map(function (i) {
+                        return i.getAttribute('data-id');
+                    });
+                }
+
+                window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
+                    Dashboard.navigate('/dashboard/users/profile?userId=' + user.Id)
+                        .catch(err => {
+                            console.error('[usernew] failed to navigate to edit user page', err);
+                        });
+                }).catch(err => {
+                    console.error('[usernew] failed to update user policy', err);
+                });
+            }, function () {
+                toast(globalize.translate('ErrorDefault'));
+                loading.hide();
             });
         };
 
@@ -179,43 +163,28 @@ const UserNew = () => {
             return false;
         };
 
-        const enableAllChannelsChange = function (this: HTMLInputElement) {
+        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
             const channelAccessListContainer = page.querySelector('.channelAccessListContainer') as HTMLDivElement;
             this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide');
-        };
+        });
 
-        const enableAllFoldersChange = function (this: HTMLInputElement) {
+        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
             const folderAccessListContainer = page.querySelector('.folderAccessListContainer') as HTMLDivElement;
             this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide');
-        };
+        });
 
-        const onCancelClick = () => {
-            window.history.back();
-        };
-
-        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', enableAllChannelsChange);
-        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', enableAllFoldersChange);
         (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onCancelClick);
 
-        return () => {
-            (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).removeEventListener('change', enableAllChannelsChange);
-            (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).removeEventListener('change', enableAllFoldersChange);
-            (page.querySelector('.newUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
-            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onCancelClick);
-        };
-    }, [loadUser, createUser, updateUserPolicy, navigate]);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
+            window.history.back();
+        });
+    }, [loadUser]);
 
     return (
         <Page
             id='newUserPage'
             className='mainAnimatedPage type-interior'
         >
-            <Toast
-                open={isErrorToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('ErrorDefault')}
-            />
             <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer

src/apps/dashboard/routes/users/index.tsx

@@ -1,5 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
+import React, { useEffect, useState, useRef } from 'react';
+
+import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
+import loading from '../../../../components/loading/loading';
+import dom from '../../../../scripts/dom';
 import confirm from '../../../../components/confirm/confirm';
 import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
@@ -9,12 +14,6 @@ import '../../../../components/cardbuilder/card.scss';
 import '../../../../components/indicators/indicators.scss';
 import '../../../../styles/flexstyles.scss';
 import Page from '../../../../components/Page';
-import { useLocation, useNavigate } from 'react-router-dom';
-import Toast from 'apps/dashboard/components/Toast';
-import { useUsers } from 'hooks/useUsers';
-import Loading from 'components/loading/LoadingComponent';
-import { useDeleteUser } from 'apps/dashboard/features/users/api/useDeleteUser';
-import dom from 'utils/dom';
 
 type MenuEntry = {
     name?: string;
@@ -23,30 +22,30 @@ type MenuEntry = {
 };
 
 const UserProfiles = () => {
-    const location = useLocation();
-    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
-    const element = useRef<HTMLDivElement>(null);
-    const navigate = useNavigate();
-    const { data: users, isPending } = useUsers();
-    const deleteUser = useDeleteUser();
+    const [ users, setUsers ] = useState<UserDto[]>([]);
 
-    const handleToastClose = useCallback(() => {
-        setIsSettingsSavedToastOpen(false);
-    }, []);
+    const element = useRef<HTMLDivElement>(null);
+
+    const loadData = () => {
+        loading.show();
+        window.ApiClient.getUsers().then(function (result) {
+            setUsers(result);
+            loading.hide();
+        }).catch(err => {
+            console.error('[userprofiles] failed to fetch users', err);
+        });
+    };
 
     useEffect(() => {
         const page = element.current;
 
-        if (location.state?.openSavedToast) {
-            setIsSettingsSavedToastOpen(true);
-            window.history.replaceState({}, '');
-        }
-
         if (!page) {
             console.error('Unexpected null reference');
             return;
         }
 
+        loadData();
+
         const showUserMenu = (elem: HTMLElement) => {
             const card = dom.parentWithClass(elem, 'card');
             const userId = card?.getAttribute('data-userid');
@@ -87,19 +86,28 @@ const UserProfiles = () => {
                     callback: function (id: string) {
                         switch (id) {
                             case 'open':
-                                navigate(`/dashboard/users/profile?userId=${userId}`);
+                                Dashboard.navigate('/dashboard/users/profile?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user edit page', err);
+                                    });
                                 break;
 
                             case 'access':
-                                navigate(`/dashboard/users/access?userId=${userId}`);
+                                Dashboard.navigate('/dashboard/users/access?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user library page', err);
+                                    });
                                 break;
 
                             case 'parentalcontrol':
-                                navigate(`/dashboard/users/parentalcontrol?userId=${userId}`);
+                                Dashboard.navigate('/dashboard/users/parentalcontrol?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to parental control page', err);
+                                    });
                                 break;
 
                             case 'delete':
-                                confirmDeleteUser(userId, username);
+                                deleteUser(userId, username);
                         }
                     }
                 }).catch(() => {
@@ -110,7 +118,7 @@ const UserProfiles = () => {
             });
         };
 
-        const confirmDeleteUser = (id: string, username?: string | null) => {
+        const deleteUser = (id: string, username?: string | null) => {
             const title = username ? globalize.translate('DeleteName', username) : globalize.translate('DeleteUser');
             const text = globalize.translate('DeleteUserConfirmation');
 
@@ -120,38 +128,32 @@ const UserProfiles = () => {
                 confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(function () {
-                deleteUser.mutate({
-                    userId: id
+                loading.show();
+                window.ApiClient.deleteUser(id).then(function () {
+                    loadData();
+                }).catch(err => {
+                    console.error('[userprofiles] failed to delete user', err);
                 });
             }).catch(() => {
                 // confirm dialog closed
             });
         };
 
-        const onPageClick = function (e: MouseEvent) {
+        page.addEventListener('click', function (e) {
             const btnUserMenu = dom.parentWithClass(e.target as HTMLElement, 'btnUserMenu');
 
             if (btnUserMenu) {
                 showUserMenu(btnUserMenu);
             }
-        };
+        });
 
-        const onAddUserClick = function() {
-            navigate('/dashboard/users/add');
-        };
-
-        page.addEventListener('click', onPageClick);
-        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', onAddUserClick);
-
-        return () => {
-            page.removeEventListener('click', onPageClick);
-            (page.querySelector('#btnAddUser') as HTMLButtonElement).removeEventListener('click', onAddUserClick);
-        };
-    }, [navigate, deleteUser, location.state?.openSavedToast]);
-
-    if (isPending) {
-        return <Loading />;
-    }
+        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
+            Dashboard.navigate('/dashboard/users/add')
+                .catch(err => {
+                    console.error('[userprofiles] failed to navigate to new user page', err);
+                });
+        });
+    }, []);
 
     return (
         <Page
@@ -159,11 +161,6 @@ const UserProfiles = () => {
             className='mainAnimatedPage type-interior userProfilesPage fullWidthContent'
             title={globalize.translate('HeaderUsers')}
         >
-            <Toast
-                open={isSettingsSavedToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('SettingsSaved')}
-            />
             <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
@@ -177,7 +174,7 @@ const UserProfiles = () => {
                 </div>
 
                 <div className='localUsers itemsContainer vertical-wrap'>
-                    {users?.map(user => {
+                    {users.map(user => {
                         return <UserCardBox key={user.Id} user={user} />;
                     })}
                 </div>

src/apps/dashboard/routes/users/parentalcontrol.tsx

@@ -12,12 +12,12 @@ import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
 import prompt from '../../../../components/prompt/prompt';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import Toast from 'apps/dashboard/components/Toast';
 
 type NamedItem = {
     name: string;
@@ -30,7 +30,6 @@ type UnratedNamedItem = NamedItem & {
 
 function handleSaveUser(
     page: HTMLDivElement,
-    parentalRatingsRef: React.MutableRefObject<ParentalRating[]>,
     getSchedulesFromPage: () => AccessSchedule[],
     getAllowedTagsFromPage: () => string[],
     getBlockedTagsFromPage: () => string[],
@@ -43,12 +42,8 @@ function handleSaveUser(
             throw new Error('Unexpected null user id or policy');
         }
 
-        const parentalRatingIndex = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
-        const parentalRating = parentalRatingsRef.current[parentalRatingIndex] as ParentalRating;
-        const score = parentalRating?.RatingScore?.score;
-        const subScore = parentalRating?.RatingScore?.subScore;
-        userPolicy.MaxParentalRating = Number.isNaN(score) ? null : score;
-        userPolicy.MaxParentalSubRating = Number.isNaN(subScore) ? null : subScore;
+        const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
+        userPolicy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
         userPolicy.BlockUnratedItems = Array.prototype.filter
             .call(page.querySelectorAll('.chkUnratedItem'), i => i.checked)
             .map(i => i.getAttribute('data-itemtype'));
@@ -74,14 +69,33 @@ const UserParentalControl = () => {
     const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
     const [ allowedTags, setAllowedTags ] = useState<string[]>([]);
     const [ blockedTags, setBlockedTags ] = useState<string[]>([]);
-    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
     const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);
 
     const element = useRef<HTMLDivElement>(null);
-    const parentalRatingsRef = useRef<ParentalRating[]>([]);
 
-    const handleToastClose = useCallback(() => {
-        setIsSettingsSavedToastOpen(false);
+    const populateRatings = useCallback((allParentalRatings: ParentalRating[]) => {
+        let rating;
+        const ratings: ParentalRating[] = [];
+
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+            rating = allParentalRatings[i];
+
+            if (ratings.length) {
+                const lastRating = ratings[ratings.length - 1];
+
+                if (lastRating.Value === rating.Value) {
+                    lastRating.Name += '/' + rating.Name;
+                    continue;
+                }
+            }
+
+            ratings.push({
+                Name: rating.Name,
+                Value: rating.Value
+            });
+        }
+
+        setParentalRatings(ratings);
     }, []);
 
     const loadUnratedItems = useCallback((user: UserDto) => {
@@ -147,52 +161,16 @@ const UserParentalControl = () => {
 
         setAllowedTags(user.Policy?.AllowedTags || []);
         setBlockedTags(user.Policy?.BlockedTags || []);
+        populateRatings(allParentalRatings);
 
-        // Build the grouped ratings array
-        const ratings: ParentalRating[] = [];
-        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
-            const rating = allParentalRatings[i];
-
-            if (ratings.length) {
-                const lastRating = ratings[ratings.length - 1];
-
-                if (lastRating.RatingScore?.score === rating.RatingScore?.score && lastRating.RatingScore?.subScore == rating.RatingScore?.subScore) {
-                    lastRating.Name += '/' + rating.Name;
-                    continue;
-                }
+        let ratingValue = '';
+        allParentalRatings.forEach(rating => {
+            if (rating.Value != null && user.Policy?.MaxParentalRating != null && user.Policy.MaxParentalRating >= rating.Value) {
+                ratingValue = `${rating.Value}`;
             }
+        });
 
-            ratings.push(rating);
-        }
-        setParentalRatings(ratings);
-        parentalRatingsRef.current = ratings;
-
-        // Find matching rating - first try exact match with score and subscore
-        let ratingIndex = '';
-        const userMaxRating = user.Policy?.MaxParentalRating;
-        const userMaxSubRating = user.Policy?.MaxParentalSubRating;
-
-        if (userMaxRating != null) {
-            // First try to find exact match with both score and subscore
-            ratings.forEach((rating, index) => {
-                if (rating.RatingScore?.score === userMaxRating
-                    && rating.RatingScore?.subScore === userMaxSubRating) {
-                    ratingIndex = `${index}`;
-                }
-            });
-
-            // If no exact match found, fallback to score-only match
-            if (!ratingIndex) {
-                ratings.forEach((rating, index) => {
-                    if (rating.RatingScore?.score != null
-                        && rating.RatingScore.score <= userMaxRating) {
-                        ratingIndex = `${index}`;
-                    }
-                });
-            }
-        }
-
-        setMaxParentalRating(ratingIndex);
+        setMaxParentalRating(ratingValue);
 
         if (user.Policy?.IsAdministrator) {
             (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
@@ -201,7 +179,7 @@ const UserParentalControl = () => {
         }
         setAccessSchedules(user.Policy?.AccessSchedules || []);
         loading.hide();
-    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems]);
+    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems, populateRatings]);
 
     const loadData = useCallback(() => {
         if (!userId) {
@@ -305,10 +283,10 @@ const UserParentalControl = () => {
 
         const onSaveComplete = () => {
             loading.hide();
-            setIsSettingsSavedToastOpen(true);
+            toast(globalize.translate('SettingsSaved'));
         };
 
-        const saveUser = handleSaveUser(page, parentalRatingsRef, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
+        const saveUser = handleSaveUser(page, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
 
         const onSubmit = (e: Event) => {
             if (!userId) {
@@ -364,11 +342,11 @@ const UserParentalControl = () => {
     const optionMaxParentalRating = () => {
         let content = '';
         content += '<option value=\'\'></option>';
-        parentalRatings.forEach((rating, index) => {
-            if (rating.RatingScore != null) {
-                content += `<option value='${index}'>${escapeHTML(rating.Name)}</option>`;
+        for (const rating of parentalRatings) {
+            if (rating.Value != null) {
+                content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
             }
-        });
+        }
         return content;
     };
 
@@ -392,11 +370,6 @@ const UserParentalControl = () => {
             id='userParentalControlPage'
             className='mainAnimatedPage type-interior'
         >
-            <Toast
-                open={isSettingsSavedToastOpen}
-                onClose={handleToastClose}
-                message={globalize.translate('SettingsSaved')}
-            />
             <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer

src/apps/dashboard/routes/users/password.tsx

@@ -1,21 +1,37 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Page from '../../../../components/Page';
-import { useUser } from 'apps/dashboard/features/users/api/useUser';
-import Loading from 'components/loading/LoadingComponent';
+import loading from '../../../../components/loading/loading';
 
 const UserPassword = () => {
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
-    const { data: user, isPending } = useUser(userId ? { userId: userId } : undefined);
+    const [ userName, setUserName ] = useState('');
 
-    if (isPending || !user) {
-        return <Loading />;
-    }
+    const loadUser = useCallback(() => {
+        if (!userId) {
+            console.error('[userpassword] missing user id');
+            return;
+        }
+
+        loading.show();
+        window.ApiClient.getUser(userId).then(function (user) {
+            if (!user.Name) {
+                throw new Error('Unexpected null user.Name');
+            }
+            setUserName(user.Name);
+            loading.hide();
+        }).catch(err => {
+            console.error('[userpassword] failed to fetch user', err);
+        });
+    }, [userId]);
+    useEffect(() => {
+        loadUser();
+    }, [loadUser]);
 
     return (
         <Page
@@ -25,13 +41,13 @@ const UserPassword = () => {
             <div className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
-                        title={user?.Name || undefined}
+                        title={userName}
                     />
                 </div>
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm
-                        user={user}
+                        userId={userId}
                     />
                 </div>
             </div>

src/apps/dashboard/routes/users/profile.tsx

@@ -1,8 +1,9 @@
 import type { BaseItemDto, NameIdPair, SyncPlayUserAccessType, UserDto } from '@jellyfin/sdk/lib/generated-client';
 import escapeHTML from 'escape-html';
 import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 
+import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import Button from '../../../../elements/emby-button/Button';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -11,16 +12,9 @@ import Input from '../../../../elements/emby-input/Input';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
-import { useUser } from 'apps/dashboard/features/users/api/useUser';
-import { useAuthProviders } from 'apps/dashboard/features/users/api/useAuthProviders';
-import { usePasswordResetProviders } from 'apps/dashboard/features/users/api/usePasswordResetProviders';
-import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
-import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
-import { useUpdateUser } from 'apps/dashboard/features/users/api/useUpdateUser';
-import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
-import { useNetworkConfig } from 'apps/dashboard/features/users/api/useNetworkConfig';
 
 type ResetProvider = BaseItemDto & {
     checkedAttribute: string
@@ -31,26 +25,27 @@ const getCheckedElementDataIds = (elements: NodeListOf<Element>) => (
         .map(e => e.getAttribute('data-id'))
 );
 
+function onSaveComplete() {
+    Dashboard.navigate('/dashboard/users')
+        .catch(err => {
+            console.error('[useredit] failed to navigate to user profile', err);
+        });
+    loading.hide();
+    toast(globalize.translate('SettingsSaved'));
+}
+
 const UserEdit = () => {
-    const navigate = useNavigate();
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
+    const [ userDto, setUserDto ] = useState<UserDto>();
     const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ResetProvider[]>([]);
+    const [ authProviders, setAuthProviders ] = useState<NameIdPair[]>([]);
+    const [ passwordResetProviders, setPasswordResetProviders ] = useState<NameIdPair[]>([]);
     const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);
 
     const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
     const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');
 
-    const { data: userDto, isSuccess: isUserSuccess } = useUser(userId ? { userId: userId } : undefined);
-    const { data: authProviders, isSuccess: isAuthProvidersSuccess } = useAuthProviders();
-    const { data: passwordResetProviders, isSuccess: isPasswordResetProvidersSuccess } = usePasswordResetProviders();
-    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders({ isHidden: false });
-    const { data: channels, isSuccess: isChannelsSuccess } = useChannels({ supportsMediaDeletion: true });
-    const { data: netConfig, isSuccess: isNetConfigSuccess } = useNetworkConfig();
-
-    const updateUser = useUpdateUser();
-    const updateUserPolicy = useUpdateUserPolicy();
-
     const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
@@ -58,10 +53,17 @@ const UserEdit = () => {
         select.dispatchEvent(evt);
     };
 
+    const getUser = () => {
+        if (!userId) throw new Error('missing user id');
+        return window.ApiClient.getUser(userId);
+    };
+
     const loadAuthProviders = useCallback((page: HTMLDivElement, user: UserDto, providers: NameIdPair[]) => {
         const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider') as HTMLDivElement;
         fldSelectLoginProvider.classList.toggle('hide', providers.length <= 1);
 
+        setAuthProviders(providers);
+
         const currentProviderId = user.Policy?.AuthenticationProviderId || '';
         setAuthenticationProviderId(currentProviderId);
     }, []);
@@ -70,26 +72,30 @@ const UserEdit = () => {
         const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider') as HTMLDivElement;
         fldSelectPasswordResetProvider.classList.toggle('hide', providers.length <= 1);
 
+        setPasswordResetProviders(providers);
+
         const currentProviderId = user.Policy?.PasswordResetProviderId || '';
         setPasswordResetProviderId(currentProviderId);
     }, []);
 
-    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, folders: BaseItemDto[]) => {
-        let isChecked;
-        let checkedAttribute;
-        const itemsArr: ResetProvider[] = [];
+    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, mediaFolders: BaseItemDto[]) => {
+        window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', {
+            SupportsMediaDeletion: true
+        })).then(function (channelsResult) {
+            let isChecked;
+            let checkedAttribute;
+            const itemsArr: ResetProvider[] = [];
 
-        for (const mediaFolder of folders) {
-            isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
-            checkedAttribute = isChecked ? ' checked="checked"' : '';
-            itemsArr.push({
-                ...mediaFolder,
-                checkedAttribute: checkedAttribute
-            });
-        }
+            for (const mediaFolder of mediaFolders) {
+                isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
+                checkedAttribute = isChecked ? ' checked="checked"' : '';
+                itemsArr.push({
+                    ...mediaFolder,
+                    checkedAttribute: checkedAttribute
+                });
+            }
 
-        if (channels?.Items) {
-            for (const channel of channels.Items) {
+            for (const channel of channelsResult.Items) {
                 isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(channel.Id || '') != -1;
                 checkedAttribute = isChecked ? ' checked="checked"' : '';
                 itemsArr.push({
@@ -97,66 +103,16 @@ const UserEdit = () => {
                     checkedAttribute: checkedAttribute
                 });
             }
-        }
 
-        setDeleteFoldersAccess(itemsArr);
+            setDeleteFoldersAccess(itemsArr);
 
-        const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
-        chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
-        triggerChange(chkEnableDeleteAllFolders);
-    }, [channels]);
-
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('[useredit] Unexpected null page reference');
-            return;
-        }
-
-        if (userDto && isAuthProvidersSuccess && authProviders != null) {
-            loadAuthProviders(page, userDto, authProviders);
-        }
-    }, [authProviders, isAuthProvidersSuccess, userDto, loadAuthProviders]);
-
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('[useredit] Unexpected null page reference');
-            return;
-        }
-
-        if (userDto && isPasswordResetProvidersSuccess && passwordResetProviders != null) {
-            loadPasswordResetProviders(page, userDto, passwordResetProviders);
-        }
-    }, [passwordResetProviders, isPasswordResetProvidersSuccess, userDto, loadPasswordResetProviders]);
-
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('[useredit] Unexpected null page reference');
-            return;
-        }
-
-        if (userDto && isMediaFoldersSuccess && isChannelsSuccess && mediaFolders?.Items != null) {
-            loadDeleteFolders(page, userDto, mediaFolders.Items);
-        }
-    }, [userDto, mediaFolders, isMediaFoldersSuccess, isChannelsSuccess, channels, loadDeleteFolders]);
-
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('[useredit] Unexpected null page reference');
-            return;
-        }
-
-        if (netConfig && isNetConfigSuccess) {
-            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !netConfig.EnableRemoteAccess);
-        }
-    }, [netConfig, isNetConfigSuccess]);
+            const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
+            chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
+            triggerChange(chkEnableDeleteAllFolders);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch channels', err);
+        });
+    }, []);
 
     const loadUser = useCallback((user: UserDto) => {
         const page = element.current;
@@ -166,6 +122,24 @@ const UserEdit = () => {
             return;
         }
 
+        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
+            loadAuthProviders(page, user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch auth providers', err);
+        });
+        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) {
+            loadPasswordResetProviders(page, user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch password reset providers', err);
+        });
+        window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
+            IsHidden: false
+        })).then(function (folders) {
+            loadDeleteFolders(page, user, folders.Items);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch media folders', err);
+        });
+
         const disabledUserBanner = page.querySelector('.disabledUserBanner') as HTMLDivElement;
         disabledUserBanner.classList.toggle('hide', !user.Policy?.IsDisabled);
 
@@ -175,6 +149,7 @@ const UserEdit = () => {
 
         void libraryMenu.then(menu => menu.setTitle(user.Name));
 
+        setUserDto(user);
         (page.querySelector('#txtUserName') as HTMLInputElement).value = user.Name || '';
         (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = !!user.Policy?.IsAdministrator;
         (page.querySelector('.chkDisabled') as HTMLInputElement).checked = !!user.Policy?.IsDisabled;
@@ -198,22 +173,16 @@ const UserEdit = () => {
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = String(user.Policy?.MaxActiveSessions) || '0';
         (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = String(user.Policy?.SyncPlayAccess);
         loading.hide();
-    }, [ libraryMenu ]);
+    }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
 
     const loadData = useCallback(() => {
-        if (!userDto) {
-            console.error('[profile] No user available');
-            return;
-        }
         loading.show();
-        loadUser(userDto);
-    }, [userDto, loadUser]);
-
-    useEffect(() => {
-        if (isUserSuccess) {
-            loadData();
-        }
-    }, [loadData, isUserSuccess]);
+        getUser().then(function (user) {
+            loadUser(user);
+        }).catch(err => {
+            console.error('[useredit] failed to load data', err);
+        });
+    }, [loadUser]);
 
     useEffect(() => {
         const page = element.current;
@@ -223,6 +192,8 @@ const UserEdit = () => {
             return;
         }
 
+        loadData();
+
         const saveUser = (user: UserDto) => {
             if (!user.Id || !user.Policy) {
                 throw new Error('Unexpected null user id or policy');
@@ -254,58 +225,50 @@ const UserEdit = () => {
             user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : getCheckedElementDataIds(page.querySelectorAll('.chkFolder'));
             user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;
 
-            updateUser.mutate({ userId: user.Id, userDto: user }, {
-                onSuccess: () => {
-                    if (user.Id) {
-                        updateUserPolicy.mutate({
-                            userId: user.Id,
-                            userPolicy: user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' }
-                        }, {
-                            onSuccess: () => {
-                                loading.hide();
-                                navigate('/dashboard/users', {
-                                    state: { openSavedToast: true }
-                                });
-                            }
-                        });
-                    }
-                }
+            window.ApiClient.updateUser(user).then(() => (
+                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' })
+            )).then(() => {
+                onSaveComplete();
+            }).catch(err => {
+                console.error('[useredit] failed to update user', err);
             });
         };
 
         const onSubmit = (e: Event) => {
             loading.show();
-            if (userDto) {
-                saveUser(userDto);
-            }
+            getUser().then(function (result) {
+                saveUser(result);
+            }).catch(err => {
+                console.error('[useredit] failed to fetch user', err);
+            });
             e.preventDefault();
             e.stopPropagation();
             return false;
         };
 
-        const onBtnCancelClick = () => {
-            window.history.back();
-        };
-
         (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
             (page.querySelector('.deleteAccess') as HTMLDivElement).classList.toggle('hide', this.checked);
         });
 
+        window.ApiClient.getNamedConfiguration('network').then(function (config) {
+            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !config.EnableRemoteAccess);
+        }).catch(err => {
+            console.error('[useredit] failed to load network config', err);
+        });
+
         (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onBtnCancelClick);
 
-        return () => {
-            (page.querySelector('.editUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
-            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onBtnCancelClick);
-        };
-    }, [loadData, updateUser, userDto, updateUserPolicy, navigate]);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
+            window.history.back();
+        });
+    }, [loadData]);
 
-    const optionLoginProvider = authProviders?.map((provider) => {
+    const optionLoginProvider = authProviders.map((provider) => {
         const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
         return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
     });
 
-    const optionPasswordResetProvider = passwordResetProviders?.map((provider) => {
+    const optionPasswordResetProvider = passwordResetProviders.map((provider) => {
         const selected = provider.Id === passwordResetProviderId || passwordResetProviders.length < 2 ? ' selected' : '';
         return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
     });

src/apps/experimental/AppOverrides.scss

@@ -27,18 +27,7 @@ $mui-bp-xl: 1536px;
     padding-top: 3.25rem !important;
 }
 
-.layout-mobile {
-    .itemBackdrop {
-        // Fix backdrop position on mobile item details page
-        margin-top: 0 !important;
-
-        // Add a subtle gradient over the backdrop to ensure the app bar buttons are visible
-        &::before {
-            display: block;
-            content: "";
-            height: 100%;
-            width: 100%;
-            background: linear-gradient(180deg, rgba(32, 32, 32, 0.6) 0%, rgba(32, 32, 32, 0.2) 4rem, rgba(0, 0, 0, 0) 50%);
-        }
-    }
+// Fix backdrop position on mobile item details page
+.layout-mobile .itemBackdrop {
+    margin-top: 0 !important;
 }

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

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Cast from '@mui/icons-material/Cast';
 import IconButton from '@mui/material/IconButton';
-import type {} from '@mui/material/themeCssVarsAugmentation';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 
 import { playbackManager } from 'components/playback/playbackmanager';
@@ -15,6 +15,7 @@ import RemotePlayMenu, { ID } from './menus/RemotePlayMenu';
 import RemotePlayActiveMenu, { ID as ACTIVE_ID } from './menus/RemotePlayActiveMenu';
 
 const RemotePlayButton = () => {
+    const theme = useTheme();
     const [ playerInfo, setPlayerInfo ] = useState(playbackManager.getPlayerInfo());
 
     const updatePlayerInfo = useCallback(() => {
@@ -69,10 +70,9 @@ const RemotePlayButton = () => {
                             aria-haspopup='true'
                             onClick={onRemotePlayActiveButtonClick}
                             color='inherit'
-                            // eslint-disable-next-line react/jsx-no-bind
-                            sx={(theme) => ({
-                                color: theme.vars.palette.primary.main
-                            })}
+                            sx={{
+                                color: theme.palette.primary.main
+                            }}
                         >
                             {playerInfo.deviceName || playerInfo.name}
                         </Button>

src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx

@@ -3,7 +3,6 @@ import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collec
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import Favorite from '@mui/icons-material/Favorite';
 import Button from '@mui/material/Button/Button';
-import Icon from '@mui/material/Icon';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -16,7 +15,6 @@ import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import useCurrentTab from 'hooks/useCurrentTab';
 import { useUserViews } from 'hooks/useUserViews';
-import { useWebConfig } from 'hooks/useWebConfig';
 import globalize from 'lib/globalize';
 
 import UserViewsMenu from './UserViewsMenu';
@@ -58,19 +56,14 @@ const UserViewNav = () => {
     const libraryId = searchParams.get('topParentId') || searchParams.get('parentId');
     const collectionType = searchParams.get('collectionType');
     const { activeTab } = useCurrentTab();
-    const webConfig = useWebConfig();
 
     const isExtraLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('xl'));
     const isLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('lg'));
     const maxViews = useMemo(() => {
-        let _maxViews = MAX_USER_VIEWS_MD;
-        if (isExtraLargeScreen) _maxViews = MAX_USER_VIEWS_XL;
-        else if (isLargeScreen) _maxViews = MAX_USER_VIEWS_LG;
-
-        const customLinks = (webConfig.menuLinks || []).length;
-
-        return _maxViews - customLinks;
-    }, [ isExtraLargeScreen, isLargeScreen, webConfig.menuLinks ]);
+        if (isExtraLargeScreen) return MAX_USER_VIEWS_XL;
+        if (isLargeScreen) return MAX_USER_VIEWS_LG;
+        return MAX_USER_VIEWS_MD;
+    }, [ isExtraLargeScreen, isLargeScreen ]);
 
     const { user } = useApi();
     const {
@@ -115,21 +108,6 @@ const UserViewNav = () => {
                 {globalize.translate(MetaView.Favorites.Name)}
             </Button>
 
-            {webConfig.menuLinks?.map(link => (
-                <Button
-                    key={link.name}
-                    variant='text'
-                    color='inherit'
-                    startIcon={<Icon>{link.icon || 'link'}</Icon>}
-                    component='a'
-                    href={link.url}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                >
-                    {link.name}
-                </Button>
-            ))}
-
             {primaryViews?.map(view => (
                 <Button
                     key={view.Id}

src/apps/experimental/components/library/ItemsView.tsx

@@ -9,7 +9,6 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import classNames from 'classnames';
 import React, { type FC, useCallback } from 'react';
 
-import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useGetItemsViewByType } from 'hooks/useFetchItems';
@@ -100,7 +99,7 @@ const ItemsView: FC<ItemsViewProps> = ({
 
         if (viewType === LibraryTab.Songs) {
             listOptions.showParentTitle = true;
-            listOptions.action = ItemAction.PlayAllFromHere;
+            listOptions.action = 'playallfromhere';
             listOptions.smallIcon = true;
             listOptions.showArtist = true;
             listOptions.addToListButton = true;
@@ -301,7 +300,7 @@ const ItemsView: FC<ItemsViewProps> = ({
                             xs: 1,
                             sm: 0
                         },
-                        justifyContent: 'flex-end'
+                        justifyContent: 'end'
                     }}
                 >
                     {!isPending && (

src/apps/experimental/components/library/ProgramsSectionView.tsx

@@ -1,16 +1,14 @@
 import React, { type FC } from 'react';
-
-import NoItemsMessage from 'components/common/NoItemsMessage';
-import SectionContainer from 'components/common/SectionContainer';
-import Loading from 'components/loading/LoadingComponent';
-import { appRouter } from 'components/router/appRouter';
-import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
+import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
+import Loading from 'components/loading/LoadingComponent';
+import NoItemsMessage from 'components/common/NoItemsMessage';
+import SectionContainer from 'components/common/SectionContainer';
+import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
-import { CardShape } from 'utils/card';
 
 interface ProgramsSectionViewProps {
     parentId: ParentId;
@@ -94,7 +92,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
                         showChannelName: false,
                         cardLayout: true,
                         centerText: false,
-                        action: ItemAction.Edit,
+                        action: 'edit',
                         cardFooterAside: 'none',
                         preferThumb: true,
                         coverImage: true,

src/apps/experimental/features/details/components/buttons/PlayOrResumeButton.tsx

@@ -4,7 +4,6 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { getChannelQuery } from 'hooks/api/liveTvHooks/useGetChannel';
 import globalize from 'lib/globalize';
@@ -77,7 +76,7 @@ const PlayOrResumeButton: FC<PlayOrResumeButtonProps> = ({
     return (
         <IconButton
             className='button-flat btnPlayOrResume'
-            data-action={isResumable ? ItemAction.Resume : ItemAction.Play}
+            data-action={isResumable ? 'resume' : 'play'}
             title={
                 isResumable ?
                     globalize.translate('ButtonResume') :

src/apps/experimental/features/preferences/components/DisplayPreferences.tsx

@@ -12,7 +12,6 @@ import React, { Fragment } from 'react';
 
 import { appHost } from 'components/apphost';
 import { AppFeature } from 'constants/appFeature';
-import { LayoutMode } from 'constants/layoutMode';
 import { useApi } from 'hooks/useApi';
 import { useThemes } from 'hooks/useThemes';
 import globalize from 'lib/globalize';
@@ -46,10 +45,11 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         onChange={onChange}
                         value={values.layout}
                     >
-                        <MenuItem value={LayoutMode.Auto}>{globalize.translate('Auto')}</MenuItem>
-                        <MenuItem value={LayoutMode.Desktop}>{globalize.translate('Desktop')}</MenuItem>
-                        <MenuItem value={LayoutMode.Mobile}>{globalize.translate('Mobile')}</MenuItem>
-                        <MenuItem value={LayoutMode.Tv}>{globalize.translate('TV')}</MenuItem>
+                        <MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
+                        <MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
+                        <MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
+                        <MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
+                        <MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
                     </Select>
                     <FormHelperText component={Stack} id='display-settings-layout-description'>
                         <span>{globalize.translate('DisplayModeHelp')}</span>
@@ -169,30 +169,6 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </Fragment>
             ) }
 
-            <FormControl fullWidth>
-                <TextField
-                    aria-describedby='display-settings-slideshow-interval-description'
-                    value={values.slideshowInterval}
-                    label={globalize.translate('LabelSlideshowInterval')}
-                    name='slideshowInterval'
-                    onChange={onChange}
-                    slotProps={{
-                        htmlInput: {
-                            inputMode: 'numeric',
-                            max: '3600',
-                            min: '1',
-                            pattern: '[0-9]',
-                            required: true,
-                            step: '1',
-                            type: 'number'
-                        }
-                    }}
-                />
-                <FormHelperText id='display-settings-slideshow-interval-description'>
-                    {globalize.translate('LabelSlideshowIntervalHelp')}
-                </FormHelperText>
-            </FormControl>
-
             <FormControl fullWidth>
                 <FormControlLabel
                     aria-describedby='display-settings-faster-animations-description'

src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts

@@ -10,9 +10,6 @@ import themeManager from 'scripts/themeManager';
 import { currentSettings, UserSettings } from 'scripts/settings/userSettings';
 
 import type { DisplaySettingsValues } from '../types/displaySettingsValues';
-import { useThemes } from 'hooks/useThemes';
-import { Theme } from 'types/webConfig';
-import { FALLBACK_THEME_ID } from 'hooks/useUserTheme';
 
 interface UseDisplaySettingsParams {
     userId?: string | null;
@@ -23,7 +20,6 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
     const [userSettings, setUserSettings] = useState<UserSettings>();
     const [displaySettings, setDisplaySettings] = useState<DisplaySettingsValues>();
     const { __legacyApiClient__, user: currentUser } = useApi();
-    const { defaultTheme } = useThemes();
 
     useEffect(() => {
         if (!userId || !currentUser || !__legacyApiClient__) {
@@ -33,7 +29,7 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
         setLoading(true);
 
         void (async () => {
-            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId, defaultTheme });
+            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId });
 
             setDisplaySettings(loadedSettings.displaySettings);
             setUserSettings(loadedSettings.userSettings);
@@ -66,17 +62,15 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
 }
 
 interface LoadDisplaySettingsParams {
-    currentUser: UserDto
-    userId?: string
-    api: ApiClient
-    defaultTheme?: Theme
+    currentUser: UserDto;
+    userId?: string;
+    api: ApiClient;
 }
 
 async function loadDisplaySettings({
     currentUser,
     userId,
-    api,
-    defaultTheme
+    api
 }: LoadDisplaySettingsParams) {
     const settings = (!userId || userId === currentUser?.Id) ? currentSettings : new UserSettings();
     const user = (!userId || userId === currentUser?.Id) ? currentUser : await api.getUser(userId);
@@ -84,8 +78,8 @@ async function loadDisplaySettings({
     await settings.setUserInfo(userId, api);
 
     const displaySettings = {
-        customCss: settings.customCss() || '',
-        dashboardTheme: settings.dashboardTheme() || defaultTheme?.id || FALLBACK_THEME_ID,
+        customCss: settings.customCss(),
+        dashboardTheme: settings.dashboardTheme() || 'auto',
         dateTimeLocale: settings.dateTimeLocale() || 'auto',
         disableCustomCss: Boolean(settings.disableCustomCss()),
         displayMissingEpisodes: user?.Configuration?.DisplayMissingEpisodes ?? false,
@@ -103,8 +97,7 @@ async function loadDisplaySettings({
         maxDaysForNextUp: settings.maxDaysForNextUp(),
         screensaver: settings.screensaver() || 'none',
         screensaverInterval: settings.backdropScreensaverInterval(),
-        slideshowInterval: settings.slideshowInterval(),
-        theme: settings.theme() || defaultTheme?.id || FALLBACK_THEME_ID
+        theme: settings.theme()
     };
 
     return {
@@ -132,7 +125,7 @@ async function saveDisplaySettings({
         userSettings.language(normalizeValue(newDisplaySettings.language));
     }
     userSettings.customCss(normalizeValue(newDisplaySettings.customCss));
-    userSettings.dashboardTheme(newDisplaySettings.dashboardTheme);
+    userSettings.dashboardTheme(normalizeValue(newDisplaySettings.dashboardTheme));
     userSettings.dateTimeLocale(normalizeValue(newDisplaySettings.dateTimeLocale));
     userSettings.disableCustomCss(newDisplaySettings.disableCustomCss);
     userSettings.enableBlurhash(newDisplaySettings.enableBlurHash);

src/apps/experimental/features/preferences/types/displaySettingsValues.ts

@@ -18,6 +18,5 @@ export interface DisplaySettingsValues {
     maxDaysForNextUp: number;
     screensaver: string;
     screensaverInterval: number;
-    slideshowInterval: number;
     theme: string;
 }

src/apps/experimental/routes/home.tsx

@@ -5,7 +5,7 @@ import globalize from '../../../lib/globalize';
 import { clearBackdrop } from '../../../components/backdrop/backdrop';
 import layoutManager from '../../../components/layoutManager';
 import Page from '../../../components/Page';
-import { EventType } from 'constants/eventType';
+import { EventType } from 'types/eventType';
 import Events from 'utils/events';
 
 import '../../../elements/emby-tabs/emby-tabs';