Merge tag 'v10.11.6' into release-10.11.z

Restore back button in experimental layout for apps

.github/workflows/__codeql.yml

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

.github/workflows/__package.yml

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

.github/workflows/__quality_checks.yml

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

.github/workflows/pull_request.yml

@@ -80,7 +80,7 @@ jobs:
     
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
         with:
           ref: ${{ github.event.pull_request.head.sha }}
     

CONTRIBUTORS.md

@@ -101,6 +101,8 @@
 - [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.11.0",
+  "version": "10.11.6",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
@@ -84,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.202507090504",
+    "@jellyfin/sdk": "0.12.0",
     "@jellyfin/ux-web": "1.0.0",
     "@mui/icons-material": "6.4.12",
     "@mui/material": "6.4.12",
@@ -106,7 +106,7 @@
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
-    "hls.js": "1.6.5",
+    "hls.js": "1.6.13",
     "intersection-observer": "0.12.2",
     "jellyfin-apiclient": "1.11.0",
     "jquery": "3.7.1",
@@ -168,7 +168,7 @@
   },
   "engines": {
     "node": ">=20.0.0",
-    "npm": ">=9.6.4",
+    "npm": ">=9.6.4 <11.0.0",
     "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,
@@ -15,7 +15,8 @@ import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import UserThemeProvider from 'themes/UserThemeProvider';
+import appTheme from 'themes/themes';
+import { ThemeStorageManager } from 'themes/themeStorageManager';
 
 const layoutMode = localStorage.getItem('layout');
 const isExperimentalLayout = layoutMode === 'experimental';
@@ -51,11 +52,15 @@ function RootAppLayout() {
         .some(path => location.pathname.startsWith(`/${path}`));
 
     return (
-        <UserThemeProvider>
+        <ThemeProvider
+            theme={appTheme}
+            defaultMode='dark'
+            storageManager={ThemeStorageManager}
+        >
             <Backdrop />
             <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
 
             <Outlet />
-        </UserThemeProvider>
+        </ThemeProvider>
     );
 }

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

src/apps/dashboard/components/SearchInput.tsx

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

src/apps/dashboard/components/Toast.tsx

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

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

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

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

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

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

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

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

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

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

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

src/apps/dashboard/constants/helpLinks.ts

@@ -22,10 +22,7 @@ export const HelpLinks = [
         paths: ['/dashboard/playback/transcoding'],
         url: 'https://jellyfin.org/docs/general/server/transcoding'
     }, {
-        paths: [
-            '/dashboard/plugins',
-            '/dashboard/plugins/catalog'
-        ],
+        paths: ['/dashboard/plugins'],
         url: 'https://jellyfin.org/docs/general/server/plugins/'
     }, {
         paths: ['/dashboard/plugins/repositories'],
@@ -50,5 +47,8 @@ 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

@@ -1,14 +0,0 @@
-<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

@@ -1,383 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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

@@ -1,338 +0,0 @@
-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 'scripts/dom';
+import dom from 'utils/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,7 +4,6 @@ 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';
@@ -12,13 +11,15 @@ 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 }: ActivityListItemProps) => {
+const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemProps) => {
     const relativeDate = useMemo(() => {
         if (item.Date) {
             return formatRelative(Date.parse(item.Date), Date.now(), { locale: getLocale() });
@@ -29,7 +30,7 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)
 
     return (
         <ListItem disablePadding>
-            <ListItemButton>
+            <ListItemLink to={to}>
                 <ListItemAvatar>
                     <Avatar sx={{ bgcolor: getLogLevelColor(item.Severity || LogLevel.Information) + '.main' }}>
                         <Notifications sx={{ color: '#fff' }} />
@@ -37,14 +38,28 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)
                 </ListItemAvatar>
 
                 <ListItemText
-                    primary={<Typography>{item.Name}</Typography>}
+                    primary={<Typography sx={{ whiteSpace: 'pre-wrap' }}>{item.Name}</Typography>}
                     secondary={(
                         <Stack>
-                            <Typography variant='body1' color='text.secondary'>
+                            <Typography
+                                sx={{
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden'
+                                }}
+                                variant='body1'
+                                color='text.secondary'
+                            >
                                 {relativeDate}
                             </Typography>
                             {displayShortOverview && (
-                                <Typography variant='body1' color='text.secondary'>
+                                <Typography
+                                    sx={{
+                                        textOverflow: 'ellipsis',
+                                        overflow: 'hidden'
+                                    }}
+                                    variant='body1'
+                                    color='text.secondary'
+                                >
                                     {item.ShortOverview}
                                 </Typography>
                             )}
@@ -52,7 +67,7 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)
                     )}
                     disableTypography
                 />
-            </ListItemButton>
+            </ListItemLink>
         </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 } from 'react';
+import React, { FunctionComponent, useCallback, useState } 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 'components/toast/toast';
+import Toast from 'apps/dashboard/components/Toast';
 
 type IProps = {
     backup: BackupManifestDto;
@@ -25,10 +25,16 @@ 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);
-            toast({ text: globalize.translate('Copied') });
+            setIsCopiedToastOpen(true);
         }
     }, [ backup.Path ]);
 
@@ -39,16 +45,21 @@ 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 gap={2}>
+                <Stack spacing={2}>
                     <Box>
                         <Stack
                             direction='row'
-                            gap={2}
+                            spacing={2}
                         >
                             <Typography fontWeight='bold'>{globalize.translate('LabelPath')}</Typography>
                             <Stack direction='row'>
@@ -60,7 +71,7 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
                         </Stack>
                         <Stack
                             direction='row'
-                            gap={2}
+                            spacing={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} color='error'>
+                <Button onClick={onClose} variant='text'>
                     {globalize.translate('ButtonCancel')}
                 </Button>
                 <Button onClick={onConfirm}>

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,237 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,16 @@
+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,7 +12,13 @@ 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
-    return response.data as never as string;
+    const data = response.data as never as string | object;
+
+    if (typeof data === 'object') {
+        return JSON.stringify(data, null, 2);
+    } else {
+        return data;
+    }
 };
 export const useServerLog = (name: string) => {
     const { api } = useApi();

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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -1,28 +0,0 @@
-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,171 +1,34 @@
-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 React, { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 
-interface IProps {
-    plugin: PluginInfo;
-    configurationPage?: ConfigurationPageInfo;
+import BaseCard from 'apps/dashboard/components/BaseCard';
+
+import { PluginDetails } from '../types/PluginDetails';
+
+interface PluginCardProps {
+    plugin: PluginDetails;
 };
 
-const PluginCard = ({ plugin, configurationPage }: IProps) => {
+const PluginCard = ({ plugin }: PluginCardProps) => {
     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: '/configurationpage',
-            search: `?name=${encodeURIComponent(configurationPage?.Name || '')}`,
+            pathname: `/dashboard/plugins/${plugin.id}`,
+            search: `?name=${encodeURIComponent(plugin.name || '')}`,
             hash: location.hash
         }
-    ), [ 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);
-    }, []);
+    ), [ location, plugin ]);
 
     return (
-        <>
-            <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')}
-            />
-        </>
+        <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 }} />}
+        />
     );
 };
 

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

@@ -72,6 +72,9 @@ 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,15 +1,14 @@
+import { PluginCategory } from './pluginCategory';
+
 /** A mapping of category names used by the plugin repository to translation keys. */
-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'
+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'
 };

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

@@ -0,0 +1,12 @@
+/** 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

@@ -0,0 +1,6 @@
+/** 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,6 +2,7 @@ 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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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 'scripts/dom';
+import dom from 'utils/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}
-                    color='error'
+                    variant='text'
                 >{globalize.translate('ButtonCancel')}</Button>
                 <Button type='submit'>{globalize.translate('Add')}</Button>
             </DialogActions>

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

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

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -9,9 +9,11 @@ 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 },
@@ -21,7 +23,6 @@ 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,13 +9,6 @@ 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: {
@@ -23,13 +16,6 @@ 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,9 +2,10 @@ 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, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -53,6 +54,8 @@ export const Component = () => {
 
     const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
 
+    const theme = useTheme();
+
     const UserCell = getUserCell(users);
 
     const activityParams = useMemo(() => ({
@@ -156,8 +159,15 @@ 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
                     });
-            }, 5000);
+            }, 45000);
 
             return () => {
                 clearInterval(serverCheckInterval);

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

@@ -292,6 +292,7 @@ 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,9 +4,10 @@ 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, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -41,6 +42,7 @@ 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);
@@ -137,8 +139,15 @@ 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,
@@ -184,16 +193,25 @@ export const Component = () => {
         positionActionsColumn: 'last',
         displayColumnDefOptions: {
             'mrt-row-actions': {
-                header: ''
+                header: '',
+                size: 100
             }
         },
         renderRowActions: ({ row, table }) => {
             const isDeletable = api && row.original.Id && api.deviceInfo.id === row.original.Id;
             return (
-                <Box sx={{ display: 'flex', gap: 1 }}>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        gap: 1,
+                        '&&': {
+                            backgroundColor: 'transparent !important'
+                        }
+                    }}
+                >
                     <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,14 +1,12 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 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';
@@ -18,11 +16,9 @@ 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();
@@ -31,6 +27,10 @@ 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,36 +93,28 @@ export const Component = () => {
             />
             <Box className='content-primary'>
                 <Grid container spacing={3}>
-                    <Grid size={{ xs: 12, md: 12, lg: 8, xl: 6 }}>
+                    <Grid item xs={12} md={7} lg={7} 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 size={{ xs: 12, md: 6, lg: 4, xl: 3 }}>
+                    <Grid item xs={12} md={5} lg={5} xl={3}>
                         <ActivityLogWidget />
                     </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 item xs={12} md={6} lg={12} xl={3}>
+                        <Stack spacing={3}>
+                            <AlertsLogWidget />
+                            <ServerPathWidget />
+                        </Stack>
+                    </Grid>
                 </Grid>
             </Box>
         </Page>

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

@@ -2,31 +2,34 @@ 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, useMaterialReactTable } from 'material-react-table';
-import React, { useCallback, useMemo } from 'react';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
+import React, { useCallback, useMemo, useState } 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 { api } = useApi();
+    const [ isCreateApiKeyPromptOpen, setIsCreateApiKeyPromptOpen ] = useState(false);
+    const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState(false);
+    const [ apiKeyToDelete, setApiKeyToDelete ] = useState('');
     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>[]>(() => [
         {
@@ -49,8 +52,15 @@ 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,
@@ -96,41 +106,72 @@ export const Component = () => {
     });
 
     const onRevokeKey = useCallback((accessToken: string) => {
-        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]);
+        setApiKeyToDelete(accessToken);
+        setIsConfirmDeleteOpen(true);
+    }, []);
 
     const showNewKeyPopup = useCallback(() => {
-        if (!api) return;
+        setIsCreateApiKeyPromptOpen(true);
+    }, []);
 
-        prompt({
-            title: globalize.translate('HeaderNewApiKey'),
-            label: globalize.translate('LabelAppName'),
-            description: globalize.translate('LabelAppNameExample')
-        }).then((value) => {
-            createKey.mutate({
-                app: value
-            });
-        }).catch(() => {
-            // popup closed
+    const onCreateApiKeyPromptClose = useCallback(() => {
+        setIsCreateApiKeyPromptOpen(false);
+    }, []);
+
+    const onConfirmDelete = useCallback(() => {
+        revokeKey.mutate({
+            key: apiKeyToDelete
+        }, {
+            onSettled: () => {
+                setApiKeyToDelete('');
+                setIsConfirmDeleteOpen(false);
+            }
         });
-    }, [api, createKey]);
+    }, [ revokeKey, apiKeyToDelete ]);
+
+    const onConfirmDeleteCancel = useCallback(() => {
+        setApiKeyToDelete('');
+        setIsConfirmDeleteOpen(false);
+    }, []);
+
+    const onConfirmCreate = useCallback((name: string) => {
+        createKey.mutate({
+            app: name
+        }, {
+            onSettled: () => {
+                setIsCreateApiKeyPromptOpen(false);
+            }
+        });
+    }, [ createKey ]);
 
     return (
-        <TablePage
-            id='apiKeysPage'
-            title={globalize.translate('HeaderApiKeys')}
-            subtitle={globalize.translate('HeaderApiKeysHelp')}
-            className='mainAnimatedPage type-interior'
-            table={table}
-        />
+        <>
+            <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}
+            />
+        </>
     );
 };
 

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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,179 @@
+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 } from 'react';
+import React, { useCallback, useState } 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,13 +24,18 @@ 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);
-            toast({ text: globalize.translate('CopyLogSuccess') });
+            setIsCopiedToastOpen(true);
         }
     }, [log]);
 
@@ -52,7 +57,12 @@ export const Component = () => {
             title={fileName}
             className='mainAnimatedPage type-interior'
         >
-            <Container className='content-primary'>
+            <Toast
+                open={isCopiedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('CopyLogSuccess')}
+            />
+            <Container className='content-primary' maxWidth={false}>
                 <Box>
                     <Typography variant='h1'>{fileName}</Typography>
 
@@ -96,7 +106,14 @@ export const Component = () => {
 
                             <Paper sx={{ mt: 2 }}>
                                 <code>
-                                    <pre style={{ overflow:'auto', margin: 0, padding: '16px' }}>{log}</pre>
+                                    <pre style={{
+                                        overflow:'auto',
+                                        margin: 0,
+                                        padding: '16px',
+                                        whiteSpace: 'pre-wrap'
+                                    }}>
+                                        {log}
+                                    </pre>
                                 </code>
                             </Paper>
                         </>

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

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

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

@@ -1,96 +0,0 @@
-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,44 +1,93 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import Box from '@mui/material/Box';
-import Page from 'components/Page';
-import globalize from 'lib/globalize';
-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 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 { useConfigurationPages } from 'apps/dashboard/features/plugins/api/useConfigurationPages';
-import { findBestConfigurationPage } from 'apps/dashboard/features/plugins/api/configurationPage';
+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';
 
 export const Component = () => {
     const {
-        data: plugins,
-        isPending,
-        isError
-    } = usePlugins();
-    const {
-        data: configurationPages,
-        isError: isConfigurationPagesError,
-        isPending: isConfigurationPagesPending
-    } = useConfigurationPages();
-    const [ searchQuery, setSearchQuery ] = useState('');
+        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);
 
     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 (plugins) {
-            return plugins.filter(i => i.Name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()));
+        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()));
         } else {
             return [];
         }
-    }, [ plugins, searchQuery ]);
+    }, [ category, pluginDetails, searchQuery, status ]);
 
-    if (isPending || isConfigurationPagesPending) {
+    if (isPending) {
         return <Loading />;
     }
 
@@ -49,34 +98,166 @@ export const Component = () => {
             className='type-interior mainAnimatedPage'
         >
             <Box className='content-primary'>
-                {isError || isConfigurationPagesError ? (
-                    <Alert severity='error'>{globalize.translate('PluginsLoadError')}</Alert>
-                ) : (
-                    <Stack spacing={3}>
-                        <Typography variant='h1'>
-                            {globalize.translate('TabMyPlugins')}
+                <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>
 
-                        <TextField
-                            label={globalize.translate('Search')}
-                            value={searchQuery}
-                            onChange={onSearchChange}
-                        />
+                        <Button
+                            component={Link}
+                            to='/dashboard/plugins/repositories'
+                            variant='outlined'
+                            sx={{
+                                marginLeft: 2
+                            }}
+                        >
+                            {globalize.translate('ManageRepositories')}
+                        </Button>
 
-                        <Box>
-                            <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>
-                                ))}
-                            </Grid>
+                        <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>
-                )}
+
+                    {isError ? (
+                        <Alert
+                            severity='error'
+                            sx={{ marginBottom: 2 }}
+                        >
+                            {globalize.translate('PluginsLoadError')}
+                        </Alert>
+                    ) : (
+                        <>
+                            <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])}
+                                        />
+                                    ))}
+                                </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}
+                                    />
+                                )}
+                            </Box>
+                        </>
+                    )}
+                </Stack>
             </Box>
         </Page>
     );

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/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 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 Delete from '@mui/icons-material/Delete';
 import Download from '@mui/icons-material/Download';
 import Extension from '@mui/icons-material/Extension';
@@ -56,6 +56,7 @@ 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>();
 
@@ -115,7 +116,7 @@ const PluginPage: FC = () => {
                 isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart)
                     ?? pluginInfo?.Status !== PluginStatus.Disabled,
                 name: pluginName || pluginInfo?.Name || packageInfo?.name,
-                owner: packageInfo?.owner,
+                owner: pluginInfo?.CanUninstall === false ? 'jellyfin' : packageInfo?.owner,
                 status: pluginInfo?.Status,
                 configurationPage: findBestConfigurationPage(configurationPages || [], pluginId),
                 version,
@@ -168,7 +169,8 @@ const PluginPage: FC = () => {
             alerts.push({ messageKey: 'PluginLoadConfigError' });
         }
 
-        if (isPackageInfoError) {
+        // Don't show package load error for built-in plugins
+        if (!isPluginsLoading && pluginDetails?.canUninstall && isPackageInfoError) {
             alerts.push({
                 severity: 'warning',
                 messageKey: 'PluginLoadRepoError'
@@ -188,6 +190,8 @@ const PluginPage: FC = () => {
         isConfigurationPagesError,
         isPackageInfoError,
         isPluginsError,
+        isPluginsLoading,
+        pluginDetails?.canUninstall,
         uninstallPlugin.isError
     ]);
 
@@ -243,6 +247,7 @@ const PluginPage: FC = () => {
 
         console.debug('[PluginPage] installing plugin', installVersion);
 
+        setIsInstalling(true);
         installPlugin.mutate({
             name: pluginDetails.name,
             assemblyGuid: pluginDetails.id,
@@ -250,6 +255,7 @@ const PluginPage: FC = () => {
             repositoryUrl: installVersion.repositoryUrl
         }, {
             onSettled: () => {
+                setIsInstalling(false);
                 setPendingInstallVersion(undefined);
                 disablePlugin.reset();
                 enablePlugin.reset();
@@ -310,13 +316,17 @@ const PluginPage: FC = () => {
             <Container className='content-primary'>
 
                 {alertMessages.map(({ severity = 'error', messageKey }) => (
-                    <Alert key={messageKey} severity={severity}>
+                    <Alert
+                        key={messageKey}
+                        severity={severity}
+                        sx={{ marginBottom: 2 }}
+                    >
                         {globalize.translate(messageKey)}
                     </Alert>
                 ))}
 
                 <Grid container spacing={2} sx={{ marginTop: 0 }}>
-                    <Grid size={{ xs: 12, lg: 8 }}>
+                    <Grid item xs={12} lg={8}>
                         <Stack spacing={2}>
                             <Typography variant='h1'>
                                 {pluginDetails?.name || pluginName}
@@ -332,7 +342,7 @@ const PluginPage: FC = () => {
                         </Stack>
                     </Grid>
 
-                    <Grid size={{ lg: 4 }} sx={{ display: { xs: 'none', lg: 'initial' } }}>
+                    <Grid item lg={4} sx={{ display: { xs: 'none', lg: 'initial' } }}>
                         <Image
                             isLoading={isLoading}
                             alt={pluginDetails?.name}
@@ -341,7 +351,7 @@ const PluginPage: FC = () => {
                         />
                     </Grid>
 
-                    <Grid size={{ xs: 12, lg: 8 }} sx={{ order: { xs: 1, lg: 'initial' } }}>
+                    <Grid item xs={12} lg={8} sx={{ order: { xs: 1, lg: 'initial' } }}>
                         {!!pluginDetails?.versions.length && (
                             <>
                                 <Typography variant='h3' sx={{ marginBottom: 2 }}>
@@ -355,7 +365,7 @@ const PluginPage: FC = () => {
                         )}
                     </Grid>
 
-                    <Grid size={{ xs: 12, lg: 4 }}>
+                    <Grid item xs={12} lg={4}>
                         <Stack spacing={2} direction={{ xs: 'column', sm: 'row-reverse', lg: 'column' }}>
                             <Stack spacing={1} sx={{ flexBasis: '50%' }}>
                                 {!isLoading && !pluginDetails?.status && (
@@ -367,6 +377,7 @@ 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 { RouteObject } from 'react-router-dom';
+import { Navigate, RouteObject } from 'react-router-dom';
 
 import ConnectionRequired from 'components/ConnectionRequired';
 import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
@@ -26,7 +26,11 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
                         path: DASHBOARD_APP_PATHS.Dashboard,
                         children: [
                             ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
-                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
+                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute),
+                            {
+                                path: 'plugins/catalog',
+                                element: <Navigate replace to='/dashboard/plugins' />
+                            }
                         ],
                         errorElement: <ErrorBoundary pageClasses={[ 'type-interior' ]} />
                     },

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

@@ -7,10 +7,11 @@ 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 { MRT_ColumnDef, MRT_Table, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, MRT_Table, type MRT_Theme, 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';
@@ -26,6 +27,7 @@ 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);
@@ -80,7 +82,15 @@ 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,6 +23,7 @@ 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[]>([]);
@@ -31,6 +32,10 @@ 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);
@@ -220,7 +225,7 @@ const UserLibraryAccess = () => {
 
         const onSaveComplete = () => {
             loading.hide();
-            toast(globalize.translate('SettingsSaved'));
+            setIsSettingsSavedToastOpen(true);
         };
 
         (page.querySelector('.chkEnableAllDevices') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
@@ -243,6 +248,11 @@ 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

@@ -4,13 +4,13 @@ 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';
 
 type UserInput = {
     Name?: string;
@@ -25,8 +25,13 @@ type ItemsArr = {
 const UserNew = () => {
     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 getItemsResult = (items: BaseItemDto[]) => {
         return items.map(item =>
             ({
@@ -150,7 +155,7 @@ const UserNew = () => {
                     console.error('[usernew] failed to update user policy', err);
                 });
             }, function () {
-                toast(globalize.translate('ErrorDefault'));
+                setIsErrorToastOpen(true);
                 loading.hide();
             });
         };
@@ -185,6 +190,11 @@ const UserNew = () => {
             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,10 +1,10 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 
 import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
-import dom from '../../../../scripts/dom';
+import dom from '../../../../utils/dom';
 import confirm from '../../../../components/confirm/confirm';
 import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
@@ -14,6 +14,8 @@ import '../../../../components/cardbuilder/card.scss';
 import '../../../../components/indicators/indicators.scss';
 import '../../../../styles/flexstyles.scss';
 import Page from '../../../../components/Page';
+import { useLocation } from 'react-router-dom';
+import Toast from 'apps/dashboard/components/Toast';
 
 type MenuEntry = {
     name?: string;
@@ -22,10 +24,16 @@ type MenuEntry = {
 };
 
 const UserProfiles = () => {
+    const location = useLocation();
+    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
     const [ users, setUsers ] = useState<UserDto[]>([]);
 
     const element = useRef<HTMLDivElement>(null);
 
+    const handleToastClose = useCallback(() => {
+        setIsSettingsSavedToastOpen(false);
+    }, []);
+
     const loadData = () => {
         loading.show();
         window.ApiClient.getUsers().then(function (result) {
@@ -39,6 +47,11 @@ const UserProfiles = () => {
     useEffect(() => {
         const page = element.current;
 
+        if (location.state?.openSavedToast) {
+            setIsSettingsSavedToastOpen(true);
+            window.history.replaceState({}, '');
+        }
+
         if (!page) {
             console.error('Unexpected null reference');
             return;
@@ -161,6 +174,11 @@ 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

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,6 +30,7 @@ type UnratedNamedItem = NamedItem & {
 
 function handleSaveUser(
     page: HTMLDivElement,
+    parentalRatingsRef: React.MutableRefObject<ParentalRating[]>,
     getSchedulesFromPage: () => AccessSchedule[],
     getAllowedTagsFromPage: () => string[],
     getBlockedTagsFromPage: () => string[],
@@ -42,8 +43,12 @@ function handleSaveUser(
             throw new Error('Unexpected null user id or policy');
         }
 
-        const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
-        userPolicy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
+        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;
         userPolicy.BlockUnratedItems = Array.prototype.filter
             .call(page.querySelectorAll('.chkUnratedItem'), i => i.checked)
             .map(i => i.getAttribute('data-itemtype'));
@@ -69,33 +74,14 @@ 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 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 handleToastClose = useCallback(() => {
+        setIsSettingsSavedToastOpen(false);
     }, []);
 
     const loadUnratedItems = useCallback((user: UserDto) => {
@@ -161,16 +147,52 @@ const UserParentalControl = () => {
 
         setAllowedTags(user.Policy?.AllowedTags || []);
         setBlockedTags(user.Policy?.BlockedTags || []);
-        populateRatings(allParentalRatings);
 
-        let ratingValue = '';
-        allParentalRatings.forEach(rating => {
-            if (rating.Value != null && user.Policy?.MaxParentalRating != null && user.Policy.MaxParentalRating >= rating.Value) {
-                ratingValue = `${rating.Value}`;
+        // 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;
+                }
             }
-        });
 
-        setMaxParentalRating(ratingValue);
+            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);
 
         if (user.Policy?.IsAdministrator) {
             (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
@@ -179,7 +201,7 @@ const UserParentalControl = () => {
         }
         setAccessSchedules(user.Policy?.AccessSchedules || []);
         loading.hide();
-    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems, populateRatings]);
+    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems]);
 
     const loadData = useCallback(() => {
         if (!userId) {
@@ -283,10 +305,10 @@ const UserParentalControl = () => {
 
         const onSaveComplete = () => {
             loading.hide();
-            toast(globalize.translate('SettingsSaved'));
+            setIsSettingsSavedToastOpen(true);
         };
 
-        const saveUser = handleSaveUser(page, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
+        const saveUser = handleSaveUser(page, parentalRatingsRef, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
 
         const onSubmit = (e: Event) => {
             if (!userId) {
@@ -342,11 +364,11 @@ const UserParentalControl = () => {
     const optionMaxParentalRating = () => {
         let content = '';
         content += '<option value=\'\'></option>';
-        for (const rating of parentalRatings) {
-            if (rating.Value != null) {
-                content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+        parentalRatings.forEach((rating, index) => {
+            if (rating.RatingScore != null) {
+                content += `<option value='${index}'>${escapeHTML(rating.Name)}</option>`;
             }
-        }
+        });
         return content;
     };
 
@@ -370,6 +392,11 @@ 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/profile.tsx

@@ -1,9 +1,8 @@
 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 { useSearchParams } from 'react-router-dom';
+import { useNavigate, 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';
@@ -12,7 +11,6 @@ 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';
 
@@ -25,16 +23,8 @@ 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>();
@@ -228,7 +218,10 @@ const UserEdit = () => {
             window.ApiClient.updateUser(user).then(() => (
                 window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' })
             )).then(() => {
-                onSaveComplete();
+                navigate('/dashboard/users', {
+                    state: { openSavedToast: true }
+                });
+                loading.hide();
             }).catch(err => {
                 console.error('[useredit] failed to update user', err);
             });

src/apps/experimental/AppOverrides.scss

@@ -27,7 +27,18 @@ $mui-bp-xl: 1536px;
     padding-top: 3.25rem !important;
 }
 
-// Fix backdrop position on mobile item details page
-.layout-mobile .itemBackdrop {
-    margin-top: 0 !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%);
+        }
+    }
 }

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 { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 import Tooltip from '@mui/material/Tooltip';
 
 import { playbackManager } from 'components/playback/playbackmanager';
@@ -15,7 +15,6 @@ 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(() => {
@@ -70,9 +69,10 @@ const RemotePlayButton = () => {
                             aria-haspopup='true'
                             onClick={onRemotePlayActiveButtonClick}
                             color='inherit'
-                            sx={{
-                                color: theme.palette.primary.main
-                            }}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            sx={(theme) => ({
+                                color: theme.vars.palette.primary.main
+                            })}
                         >
                             {playerInfo.deviceName || playerInfo.name}
                         </Button>

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

@@ -2,6 +2,7 @@ import Stack from '@mui/material/Stack';
 import React, { type FC } from 'react';
 import { useLocation } from 'react-router-dom';
 
+import { appRouter, PUBLIC_PATHS } from 'components/router/appRouter';
 import AppToolbar from 'components/toolbar/AppToolbar';
 import ServerButton from 'components/toolbar/ServerButton';
 
@@ -16,14 +17,6 @@ interface AppToolbarProps {
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
-const PUBLIC_PATHS = [
-    '/addserver',
-    '/selectserver',
-    '/login',
-    '/forgotpassword',
-    '/forgotpasswordpin'
-];
-
 const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
     isDrawerAvailable,
     isDrawerOpen,
@@ -34,6 +27,10 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
     // The video osd does not show the standard toolbar
     if (location.pathname === '/video') return null;
 
+    // Only show the back button in apps when appropriate
+    const isBackButtonAvailable = window.NativeShell && appRouter.canGoBack(location.pathname);
+
+    // Check if the current path is a public path to hide user content
     const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
 
     return (
@@ -48,6 +45,7 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
             isDrawerAvailable={isDrawerAvailable}
             isDrawerOpen={isDrawerOpen}
             onDrawerButtonClick={onDrawerButtonClick}
+            isBackButtonAvailable={isBackButtonAvailable}
             isUserMenuAvailable={!isPublicPath}
         >
             {!isDrawerAvailable && (

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

@@ -221,9 +221,7 @@ const ItemsView: FC<ItemsViewProps> = ({
     const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some(
         (filter) => !!filter
     );
-    const hasSortName = libraryViewSettings.SortBy.includes(
-        ItemSortBy.SortName
-    );
+    const hasSortName = libraryViewSettings.SortBy !== ItemSortBy.Random;
 
     const itemsContainerClass = classNames(
         'centered padded-left padded-right padded-right-withalphapicker',
@@ -300,7 +298,7 @@ const ItemsView: FC<ItemsViewProps> = ({
                             xs: 1,
                             sm: 0
                         },
-                        justifyContent: 'end'
+                        justifyContent: 'flex-end'
                     }}
                 >
                     {!isPending && (

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

@@ -22,6 +22,14 @@ type SortOption = {
 
 type SortOptionsMapping = Record<string, SortOption[]>;
 
+const collectionMovieOptions: SortOption[] = [
+    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+    { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+    { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
+];
+
 const movieOrFavoriteOptions = [
     { label: 'Name', value: ItemSortBy.SortName },
     { label: 'OptionRandom', value: ItemSortBy.Random },
@@ -43,6 +51,7 @@ const photosOrPhotoAlbumsOptions = [
 
 const sortOptionsMapping: SortOptionsMapping = {
     [LibraryTab.Movies]: movieOrFavoriteOptions,
+    [LibraryTab.Collections]: collectionMovieOptions,
     [LibraryTab.Favorites]: movieOrFavoriteOptions,
     [LibraryTab.Series]: [
         { label: 'Name', value: ItemSortBy.SortName },

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

@@ -10,6 +10,9 @@ 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;
@@ -20,6 +23,7 @@ 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__) {
@@ -29,7 +33,7 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
         setLoading(true);
 
         void (async () => {
-            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId });
+            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId, defaultTheme });
 
             setDisplaySettings(loadedSettings.displaySettings);
             setUserSettings(loadedSettings.userSettings);
@@ -62,15 +66,17 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
 }
 
 interface LoadDisplaySettingsParams {
-    currentUser: UserDto;
-    userId?: string;
-    api: ApiClient;
+    currentUser: UserDto
+    userId?: string
+    api: ApiClient
+    defaultTheme?: Theme
 }
 
 async function loadDisplaySettings({
     currentUser,
     userId,
-    api
+    api,
+    defaultTheme
 }: LoadDisplaySettingsParams) {
     const settings = (!userId || userId === currentUser?.Id) ? currentSettings : new UserSettings();
     const user = (!userId || userId === currentUser?.Id) ? currentUser : await api.getUser(userId);
@@ -78,8 +84,8 @@ async function loadDisplaySettings({
     await settings.setUserInfo(userId, api);
 
     const displaySettings = {
-        customCss: settings.customCss(),
-        dashboardTheme: settings.dashboardTheme() || 'auto',
+        customCss: settings.customCss() || '',
+        dashboardTheme: settings.dashboardTheme() || defaultTheme?.id || FALLBACK_THEME_ID,
         dateTimeLocale: settings.dateTimeLocale() || 'auto',
         disableCustomCss: Boolean(settings.disableCustomCss()),
         displayMissingEpisodes: user?.Configuration?.DisplayMissingEpisodes ?? false,
@@ -97,7 +103,7 @@ async function loadDisplaySettings({
         maxDaysForNextUp: settings.maxDaysForNextUp(),
         screensaver: settings.screensaver() || 'none',
         screensaverInterval: settings.backdropScreensaverInterval(),
-        theme: settings.theme()
+        theme: settings.theme() || defaultTheme?.id || FALLBACK_THEME_ID
     };
 
     return {
@@ -125,7 +131,7 @@ async function saveDisplaySettings({
         userSettings.language(normalizeValue(newDisplaySettings.language));
     }
     userSettings.customCss(normalizeValue(newDisplaySettings.customCss));
-    userSettings.dashboardTheme(normalizeValue(newDisplaySettings.dashboardTheme));
+    userSettings.dashboardTheme(newDisplaySettings.dashboardTheme);
     userSettings.dateTimeLocale(normalizeValue(newDisplaySettings.dateTimeLocale));
     userSettings.disableCustomCss(newDisplaySettings.disableCustomCss);
     userSettings.enableBlurhash(newDisplaySettings.enableBlurHash);

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 'types/eventType';
+import { EventType } from 'constants/eventType';
 import Events from 'utils/events';
 
 import '../../../elements/emby-tabs/emby-tabs';

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

@@ -11,6 +11,7 @@ import { MovieSuggestionsSectionsView } from 'types/sections';
 const moviesTabContent: LibraryTabContent = {
     viewType: LibraryTab.Movies,
     collectionType: CollectionType.Movies,
+    isBtnPlayAllEnabled: true,
     isBtnShuffleEnabled: true,
     itemType: [BaseItemKind.Movie]
 };
@@ -20,7 +21,6 @@ const collectionsTabContent: LibraryTabContent = {
     collectionType: CollectionType.Movies,
     isBtnFilterEnabled: false,
     isBtnNewCollectionEnabled: true,
-    isAlphabetPickerEnabled: false,
     itemType: [BaseItemKind.BoxSet],
     noItemsMessage: 'MessageNoCollectionsAvailable'
 };

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

@@ -6,7 +6,7 @@ import RemotePlayButton from 'apps/experimental/components/AppToolbar/RemotePlay
 import SyncPlayButton from 'apps/experimental/components/AppToolbar/SyncPlayButton';
 import AppToolbar from 'components/toolbar/AppToolbar';
 import ViewManagerPage from 'components/viewManager/ViewManagerPage';
-import { EventType } from 'types/eventType';
+import { EventType } from 'constants/eventType';
 import Events, { type Event } from 'utils/events';
 
 /**

src/apps/stable/features/playback/constants/subtitleStylingOption.ts

@@ -0,0 +1,13 @@
+/**
+ * Options specifying if the player's native subtitle (cue) element should be used, a custom element (div), or allow
+ * Jellyfin to choose automatically based on known browser support. Some browsers do not properly apply CSS styling to
+ * the native subtitle element.
+ */
+export const SubtitleStylingOption = {
+    Auto: 'Auto',
+    Custom: 'Custom',
+    Native: 'Native'
+} as const;
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type SubtitleStylingOption = typeof SubtitleStylingOption[keyof typeof SubtitleStylingOption];

src/apps/stable/features/playback/utils/mediaSessionSubscriber.ts

@@ -51,19 +51,20 @@ class MediaSessionSubscriber extends PlaybackSubscriber {
     }
 
     private bindNavigatorSession() {
-        /* eslint-disable compat/compat */
-        navigator.mediaSession.setActionHandler('pause', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('play', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('stop', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('previoustrack', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('nexttrack', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('seekto', this.onMediaSessionAction.bind(this));
+        const actions: MediaSessionAction[] = ['pause', 'play', 'previoustrack', 'nexttrack', 'stop', 'seekto'];
+
         // iOS will only show next/prev track controls or seek controls
-        if (!browser.iOS) {
-            navigator.mediaSession.setActionHandler('seekbackward', this.onMediaSessionAction.bind(this));
-            navigator.mediaSession.setActionHandler('seekforward', this.onMediaSessionAction.bind(this));
+        if (!browser.iOS) actions.push('seekbackward', 'seekforward');
+
+        for (const action of actions) {
+            try {
+                /* eslint-disable-next-line compat/compat */
+                navigator.mediaSession.setActionHandler(action, this.onMediaSessionAction.bind(this));
+            } catch (err) {
+                // NOTE: Some legacy (TV) browsers lack support for the stop and seekto actions
+                console.warn(`[MediaSessionSubscriber] Failed to add "${action}" action handler`, err);
+            }
         }
-        /* eslint-enable compat/compat */
     }
 
     private onMediaSessionAction(details: MediaSessionActionDetails) {

src/apps/stable/features/playback/utils/playbackSubscriber.ts

@@ -78,12 +78,14 @@ export abstract class PlaybackSubscriber {
     constructor(
         protected readonly playbackManager: PlaybackManager
     ) {
+        // Bind player events before invoking any player change handlers
+        Events.on(playbackManager, PlaybackManagerEvent.PlayerChange, this.bindPlayerEvents.bind(this));
+
         Object.entries(this.playbackManagerEvents).forEach(([event, handler]) => {
             if (handler) Events.on(playbackManager, event, handler);
         });
 
         this.bindPlayerEvents();
-        Events.on(playbackManager, PlaybackManagerEvent.PlayerChange, this.bindPlayerEvents.bind(this));
     }
 
     private bindPlayerEvents() {

src/apps/stable/features/playback/utils/subtitleStyles.ts

@@ -0,0 +1,43 @@
+import { SubtitleStylingOption } from 'apps/stable/features/playback/constants/subtitleStylingOption';
+import browser from 'scripts/browser';
+import type { UserSettings } from 'scripts/settings/userSettings';
+
+// TODO: This type override should be removed when userSettings are properly typed
+interface SubtitleAppearanceSettings {
+    subtitleStyling: SubtitleStylingOption
+}
+
+export function useCustomSubtitles(userSettings: UserSettings) {
+    const subtitleAppearance = userSettings.getSubtitleAppearanceSettings() as SubtitleAppearanceSettings;
+    switch (subtitleAppearance.subtitleStyling) {
+        case SubtitleStylingOption.Native:
+            return false;
+        case SubtitleStylingOption.Custom:
+            return true;
+        default:
+            // after a system update, ps4 isn't showing anything when creating a track element dynamically
+            // going to have to do it ourselves
+            if (browser.ps4) {
+                return true;
+            }
+
+            // Tizen 5 doesn't support displaying secondary subtitles
+            if ((browser.tizenVersion && browser.tizenVersion >= 5) || browser.web0s) {
+                return true;
+            }
+
+            if (browser.edge) {
+                return true;
+            }
+
+            // font-size styling does not seem to work natively in firefox. Switching to custom subtitles element for firefox.
+            if (browser.firefox) {
+                return true;
+            }
+
+            // iOS/macOS global caption settings are causing huge font-size and margins
+            if (browser.safari) return true;
+
+            return false;
+    }
+}

src/apps/stable/routes/quickConnect/index.tsx

@@ -59,6 +59,7 @@ const QuickConnectPage: FC = () => {
             id='quickConnectPreferencesPage'
             title={globalize.translate('QuickConnect')}
             className='mainAnimatedPage libraryPage userPreferencesPage noSecondaryNavPage'
+            shouldAutoFocus
         >
             <div className='padded-left padded-right padded-bottom-page'>
                 <form onSubmit={onSubmitCode}>

src/apps/stable/routes/search.tsx

@@ -1,49 +1,26 @@
-import React, { type FC, useEffect, useState } from 'react';
+import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
+import React, { type FC } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useDebounceValue } from 'usehooks-ts';
-import { usePrevious } from 'hooks/usePrevious';
-import globalize from 'lib/globalize';
-import Page from 'components/Page';
+
 import SearchFields from 'apps/stable/features/search/components/SearchFields';
-import SearchSuggestions from 'apps/stable/features/search/components/SearchSuggestions';
 import SearchResults from 'apps/stable/features/search/components/SearchResults';
-import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
+import SearchSuggestions from 'apps/stable/features/search/components/SearchSuggestions';
+import Page from 'components/Page';
+import useSearchParam from 'hooks/useSearchParam';
+import globalize from 'lib/globalize';
 
 const COLLECTION_TYPE_PARAM = 'collectionType';
 const PARENT_ID_PARAM = 'parentId';
 const QUERY_PARAM = 'query';
 
 const Search: FC = () => {
-    const [searchParams, setSearchParams] = useSearchParams();
+    const [searchParams] = useSearchParams();
     const parentIdQuery = searchParams.get(PARENT_ID_PARAM) || undefined;
     const collectionTypeQuery = (searchParams.get(COLLECTION_TYPE_PARAM) || undefined) as CollectionType | undefined;
-    const urlQuery = searchParams.get(QUERY_PARAM) || '';
-    const [query, setQuery] = useState(urlQuery);
-    const prevQuery = usePrevious(query, '');
+    const [ query, setQuery ] = useSearchParam(QUERY_PARAM);
     const [debouncedQuery] = useDebounceValue(query, 500);
 
-    useEffect(() => {
-        if (query !== prevQuery) {
-            if (query === '' && urlQuery !== '') {
-                // The query input has been cleared; remove the url param
-                searchParams.delete(QUERY_PARAM);
-                setSearchParams(searchParams, { replace: true });
-            } else if (query !== urlQuery) {
-                // Update the query url param value
-                searchParams.set(QUERY_PARAM, query);
-                setSearchParams(searchParams, { replace: true });
-            }
-        } else if (query !== urlQuery) {
-            // Update the query if the query url param has changed
-            if (!urlQuery) {
-                searchParams.delete(QUERY_PARAM);
-                setSearchParams(searchParams, { replace: true });
-            }
-
-            setQuery(urlQuery);
-        }
-    }, [query, prevQuery, searchParams, setSearchParams, urlQuery]);
-
     return (
         <Page
             id='searchPage'

src/apps/stable/routes/session/forgotPassword/index.tsx

@@ -79,6 +79,7 @@ export const ForgotPasswordPage = () => {
         <Page
             id='forgotPasswordPage'
             className='standalonePage forgotPasswordPage mainAnimatedPage'
+            shouldAutoFocus
         >
             <div className='padded-left padded-right padded-bottom-page'>
                 <form

src/apps/wizard/controllers/library.js

@@ -5,7 +5,7 @@ import confirm from 'components/confirm/confirm';
 import loading from 'components/loading/loading';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import dom from 'scripts/dom';
+import dom from 'utils/dom';
 import taskButton from 'scripts/taskbutton';
 import Dashboard, { pageClassOn, pageIdOn } from 'utils/dashboard';
 import imageHelper from 'utils/image';
@@ -354,7 +354,7 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
         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 += escapeHtml(virtualFolder.Locations[0]);
         html += '</div>';
     } else {
         html += "<div class='cardText cardText-secondary'>";

src/apps/wizard/controllers/start/index.js

@@ -1,7 +1,7 @@
 import loading from 'components/loading/loading';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import Dashboard from 'utils/dashboard';
-import dom from 'scripts/dom';
+import dom from 'utils/dom';
 
 import 'elements/emby-button/emby-button';
 import 'elements/emby-select/emby-select';

src/assets/img/devices/firetv.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Amazon Fire TV</title><path d="M20.196 15.12c.265.337-.294 1.73-.542 2.353-.077.19.085.266.257.123 1.106-.926 1.39-2.867 1.166-3.149-.226-.277-2.16-.516-3.341.314-.183.127-.151.304.05.279.665-.08 2.147-.257 2.41.08m-.858.981c-2.064 1.523-5.056 2.333-7.632 2.333-3.611 0-6.862-1.334-9.322-3.555-.194-.176-.02-.414.21-.28 2.655 1.545 5.939 2.477 9.328 2.477 2.287 0 4.803-.476 7.115-1.458.348-.147.642.231.3.483m2.034-3.155a.388.388 0 0 1-.201-.04c-.041-.026-.087-.1-.133-.225l-1.734-4.355a1.79 1.79 0 0 0-.046-.117.266.266 0 0 1-.023-.108c0-.084.049-.128.146-.128h.58c.098 0 .165.014.205.04.04.026.082.102.127.226l1.344 3.823 1.343-3.823c.046-.124.089-.2.128-.226a.402.402 0 0 1 .205-.04h.54c.1 0 .148.044.148.128a.3.3 0 0 1-.025.108c-.016.04-.032.078-.044.117l-1.727 4.355c-.045.124-.09.199-.132.225a.388.388 0 0 1-.201.04zm-3.644.068c-.929 0-1.392-.463-1.392-1.392V8.739h-.706c-.13 0-.197-.066-.197-.196v-.246a.22.22 0 0 1 .045-.147c.03-.031.086-.055.171-.067l.717-.09.127-1.215c.013-.13.082-.196.207-.196h.41c.13 0 .196.066.196.196v1.196h1.276c.13 0 .195.065.195.197v.372c0 .13-.064.196-.195.196h-1.276v2.834c0 .243.055.411.162.51.108.098.293.147.555.147.124 0 .277-.016.46-.049.099-.02.164-.03.197-.03.052 0 .088.014.108.044.02.03.029.077.029.142v.266a.366.366 0 0 1-.04.19c-.026.043-.078.078-.157.103a3.018 3.018 0 0 1-.892.118m-4.665-2.976c.006-.052.011-.137.011-.255 0-.399-.094-.698-.28-.901-.186-.204-.46-.306-.818-.306-.412 0-.732.123-.962.369-.228.245-.36.61-.392 1.093zm-.942 3.07c-.803 0-1.411-.222-1.824-.667-.412-.444-.616-1.102-.616-1.972 0-.83.204-1.475.616-1.937.413-.46.988-.691 1.728-.691.62 0 1.098.176 1.432.524.332.351.5.846.5 1.487 0 .21-.017.422-.05.638-.014.077-.034.13-.064.156-.029.027-.077.04-.142.04h-3.08c.013.563.154.977.418 1.245.265.268.674.403 1.23.403.196 0 .385-.014.564-.04a5.04 5.04 0 0 0 .682-.166l.117-.035a.284.284 0 0 1 .09-.016c.085 0 .125.06.125.177v.276c0 .085-.012.144-.037.18a.441.441 0 0 1-.167.114 3.38 3.38 0 0 1-.701.205 4.236 4.236 0 0 1-.82.079m-5.424-.147c-.13 0-.195-.066-.195-.197v-4.58c0-.13.064-.195.195-.195h.432c.064 0 .116.012.153.039.036.025.06.076.072.146l.07.55c.176-.19.343-.34.499-.452a1.725 1.725 0 0 1 1.02-.323c.079 0 .158.003.235.01.112.014.168.072.168.176v.53c0 .117-.058.177-.178.177-.058 0-.114-.004-.17-.01a1.638 1.638 0 0 0-.18-.01c-.524 0-.973.157-1.346.47v3.472c0 .131-.066.197-.195.197zm-2.249 0c-.13 0-.196-.066-.196-.197v-4.58c0-.13.066-.195.196-.195h.579c.13 0 .195.064.195.195v4.58c0 .131-.065.197-.195.197zm.295-5.856c-.19 0-.339-.054-.447-.16a.581.581 0 0 1-.161-.428c0-.176.054-.318.16-.426.11-.109.257-.163.448-.163.189 0 .337.054.446.163.107.108.16.25.16.426a.581.581 0 0 1-.16.427.608.608 0 0 1-.446.161m-3.625 5.856c-.132 0-.197-.066-.197-.197v-4.01H.195c-.13 0-.195-.066-.195-.197v-.245c0-.065.014-.114.043-.147.03-.033.088-.055.173-.07l.705-.087v-.804c0-1.091.523-1.638 1.57-1.638.248 0 .51.036.784.109.072.019.122.047.152.088.029.038.044.107.044.205v.255c0 .124-.048.186-.148.186-.058 0-.14-.01-.248-.029-.11-.02-.23-.03-.369-.03-.3 0-.51.057-.633.172-.121.115-.181.303-.181.564v.903h1.324c.131 0 .197.064.197.195v.373c0 .13-.066.197-.197.197H1.892v4.01c0 .131-.065.197-.196.197Z" fill="#fff"/></svg>

src/assets/img/devices/titanos.svg

@@ -0,0 +1,12 @@
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<script xmlns="" />
+	<path
+		d="M0.0146346 0.593029L0.764804 3.57722C0.809995 3.75303 0.945568 3.88826 1.12633 3.92432L14.765 6.91753C15.1897 7.01219 15.5106 7.37733 15.5377 7.81459L16.6585 23.9031C16.6675 24.0158 16.7127 24.1195 16.7895 24.2006L17.133 24.5567C17.2233 24.6514 17.3454 24.7055 17.4764 24.7055C17.6075 24.7055 17.7295 24.6514 17.8199 24.5567L18.1633 24.2006C18.2401 24.1195 18.2853 24.0158 18.2944 23.9031L19.4151 7.81459C19.4467 7.38184 19.7631 7.01219 20.1879 6.91753L33.8265 3.92432C34.0027 3.88375 34.1428 3.75303 34.188 3.57722L34.9382 0.593029C34.9789 0.430747 34.9382 0.268465 34.8162 0.146753C34.6987 0.0250412 34.536 -0.0245451 34.3733 0.0115177L17.6843 3.66738C17.5442 3.69893 17.3996 3.69893 17.2595 3.66738L0.579521 0.0160255C0.543368 0.00250199 0.511735 0.00250199 0.475582 0.00250199C0.349047 0.00250199 0.227032 0.0520882 0.13665 0.146753C0.0191537 0.268465 -0.0260373 0.430747 0.0146346 0.593029Z"
+		fill="#fff" />
+	<path
+		d="M23.0349 32.301L23.8257 32.0936C23.9658 32.0576 24.0743 31.9494 24.0969 31.8096L27.7528 14.0397C27.8116 13.7062 28.0692 13.4357 28.4036 13.3545L31.7567 12.5476C31.8878 12.5161 31.9872 12.4169 32.0188 12.2862L32.8142 9.11267C32.8458 8.99095 32.8142 8.86474 32.7193 8.77458C32.6515 8.70696 32.5611 8.6709 32.4708 8.6709C32.4436 8.6709 32.412 8.6709 32.3849 8.67991L24.3319 10.6228C24.1782 10.6589 24.0698 10.7896 24.0607 10.9429L22.5965 31.9268C22.5875 32.0395 22.6327 32.1477 22.7231 32.2244C22.8089 32.2965 22.9264 32.3235 23.0394 32.2965L23.0349 32.301Z"
+		fill="#fff" />
+	<path
+		d="M10.996 10.6274L2.94297 8.68455C2.91586 8.67554 2.88422 8.67554 2.85711 8.67554C2.76221 8.67554 2.67635 8.7116 2.60856 8.77922C2.51818 8.86937 2.48654 8.99109 2.51366 9.11731L3.30902 12.2908C3.34065 12.4216 3.44007 12.5207 3.57113 12.5523L6.92429 13.3592C7.25871 13.4403 7.51629 13.7108 7.57504 14.0489L11.231 31.8053C11.2581 31.9495 11.362 32.0622 11.4976 32.0938L12.2975 32.3011C12.406 32.3282 12.5189 32.3011 12.6048 32.2245C12.6907 32.1524 12.7404 32.0442 12.7313 31.927L11.2671 10.943C11.2581 10.7852 11.1451 10.659 10.996 10.6229V10.6274Z"
+		fill="#fff" />
+</svg>

src/components/ConfirmDialog.tsx

@@ -32,7 +32,7 @@ const ConfirmDialog: FC<ConfirmDialogProps> = ({
             {title}
         </DialogTitle>
         <DialogContent>
-            <DialogContentText>
+            <DialogContentText sx={{ whiteSpace: 'pre-wrap' }}>
                 {text}
             </DialogContentText>
         </DialogContent>

src/components/InputDialog.tsx

@@ -11,13 +11,24 @@ import Stack from '@mui/material/Stack';
 interface InputDialogProps extends DialogProps {
     title: string;
     label: string;
+    helperText?: string;
+    initialText?: string;
     confirmButtonText?: string;
     onClose: () => void;
     onConfirm: (text: string) => void;
 };
 
-const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm }: InputDialogProps) => {
-    const [ text, setText ] = useState('');
+const InputDialog = ({
+    open,
+    title,
+    label,
+    helperText,
+    initialText,
+    onClose,
+    confirmButtonText,
+    onConfirm
+}: InputDialogProps) => {
+    const [ text, setText ] = useState(initialText || '');
 
     const onTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         setText(e.target.value);
@@ -37,7 +48,7 @@ const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm
         >
             {title && (
                 <DialogTitle>
-                    {title}
+                    {title || ''}
                 </DialogTitle>
             )}
             <DialogContent>
@@ -45,6 +56,7 @@ const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm
                     <TextField
                         label={label}
                         value={text}
+                        helperText={helperText}
                         onChange={onTextChange}
                         variant='standard'
                     />

src/components/UserAvatar.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
 import Avatar from '@mui/material/Avatar';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 import { useApi } from 'hooks/useApi';
 
@@ -11,7 +11,6 @@ interface UserAvatarProps {
 
 const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
     const { api } = useApi();
-    const theme = useTheme();
 
     return user ? (
         <Avatar
@@ -21,12 +20,13 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
                     `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
                     undefined
             }
-            sx={{
+            // eslint-disable-next-line react/jsx-no-bind
+            sx={(theme) => ({
                 bgcolor: api && user.Id && user.PrimaryImageTag ?
-                    theme.palette.background.paper :
-                    theme.palette.primary.dark,
+                    theme.vars.palette.background.paper :
+                    theme.vars.palette.primary.dark,
                 color: 'inherit'
-            }}
+            })}
         />
     ) : null;
 };

src/components/actionSheet/actionSheet.ts

@@ -2,7 +2,7 @@ import escapeHtml from 'escape-html';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../lib/globalize';
-import dom from '../../scripts/dom';
+import dom from '../../utils/dom';
 import '../../elements/emby-button/emby-button';
 import './actionSheet.scss';
 import 'material-design-icons-iconfont';