Update plugin drawer section

src/apps/dashboard/components/drawer/AppDrawer.tsx

@@ -29,8 +29,8 @@ const AppDrawer: FC<ResponsiveDrawerProps> = ({
         <ServerDrawerSection />
         <DevicesDrawerSection />
         <LiveTvDrawerSection />
-        <AdvancedDrawerSection />
         <PluginDrawerSection />
+        <AdvancedDrawerSection />
     </ResponsiveDrawer>
 );
 

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

@@ -1,31 +1,18 @@
 import Article from '@mui/icons-material/Article';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Extension from '@mui/icons-material/Extension';
 import Lan from '@mui/icons-material/Lan';
 import Schedule from '@mui/icons-material/Schedule';
 import VpnKey from '@mui/icons-material/VpnKey';
-import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 
 import ListItemLink from 'components/ListItemLink';
 import globalize from 'scripts/globalize';
 
-const isPluginPath = (path: string) => (
-    path.startsWith('/dashboard/plugins')
-    || path === '/configurationpage'
-);
-
 const AdvancedDrawerSection = () => {
-    const location = useLocation();
-    const isPluginSectionOpen = isPluginPath(location.pathname);
-
     return (
         <List
             aria-labelledby='advanced-subheader'
@@ -59,29 +46,6 @@ const AdvancedDrawerSection = () => {
                     <ListItemText primary={globalize.translate('TabLogs')} />
                 </ListItemLink>
             </ListItem>
-            <ListItem disablePadding>
-                <ListItemLink to='/dashboard/plugins' selected={false}>
-                    <ListItemIcon>
-                        <Extension />
-                    </ListItemIcon>
-                    <ListItemText primary={globalize.translate('TabPlugins')} />
-                    {isPluginSectionOpen ? <ExpandLess /> : <ExpandMore />}
-                </ListItemLink>
-            </ListItem>
-            <Collapse in={isPluginSectionOpen} timeout='auto' unmountOnExit>
-                <List component='div' disablePadding>
-                    <ListItemLink to='/dashboard/plugins' sx={{ pl: 4 }}>
-                        <ListItemText inset primary={globalize.translate('TabMyPlugins')} />
-                    </ListItemLink>
-                    <ListItemLink
-                        to='/dashboard/plugins/catalog'
-                        includePaths={[ '/dashboard/plugins/repositories' ]}
-                        sx={{ pl: 4 }}
-                    >
-                        <ListItemText inset primary={globalize.translate('TabCatalog')} />
-                    </ListItemLink>
-                </List>
-            </Collapse>
             <ListItem disablePadding>
                 <ListItemLink to='/dashboard/tasks'>
                     <ListItemIcon>

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

@@ -1,41 +1,26 @@
-import { ConfigurationPageInfo } from '@jellyfin/sdk/lib/generated-client';
+import Extension from '@mui/icons-material/Extension';
-import { getDashboardApi } from '@jellyfin/sdk/lib/utils/api/dashboard-api';
+import Folder from '@mui/icons-material/Folder';
-import { Folder } from '@mui/icons-material';
+import Public from '@mui/icons-material/Public';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import ListItemLink from 'components/ListItemLink';
-import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 import Dashboard from 'utils/dashboard';
+import { useConfigurationPages } from 'apps/dashboard/features/plugins/api/useConfigurationPages';
 
 const PluginDrawerSection = () => {
-    const { api } = useApi();
+    const {
-    const [ pagesInfo, setPagesInfo ] = useState<ConfigurationPageInfo[]>([]);
+        data: pagesInfo,
+        error
+    } = useConfigurationPages({ enableInMainMenu: true });
 
     useEffect(() => {
-        const fetchPluginPages = async () => {
+        if (error) console.error('[PluginDrawerSection] unable to fetch plugin config pages', error);
-            if (!api) return;
+    }, [ error ]);
-
-            const pagesResponse = await getDashboardApi(api)
-                .getConfigurationPages({ enableInMainMenu: true });
-
-            setPagesInfo(pagesResponse.data);
-        };
-
-        fetchPluginPages()
-            .catch(err => {
-                console.error('[PluginDrawerSection] unable to fetch plugin config pages', err);
-            });
-    }, [ api ]);
-
-    if (!api || pagesInfo.length < 1) {
-        return null;
-    }
 
     return (
         <List
@@ -46,19 +31,39 @@ const PluginDrawerSection = () => {
                 </ListSubheader>
             }
         >
-            {
+            <ListItemLink
-                pagesInfo.map(pageInfo => (
+                to='/dashboard/plugins'
-                    <ListItem key={pageInfo.PluginId} disablePadding>
+                includePaths={[ '/configurationpage' ]}
-                        <ListItemLink to={`/${Dashboard.getPluginUrl(pageInfo.Name)}`}>
+                excludePaths={pagesInfo?.map(p => `/${Dashboard.getPluginUrl(p.Name)}`)}
-                            <ListItemIcon>
+            >
-                                {/* TODO: Support different icons? */}
+                <ListItemIcon>
-                                <Folder />
+                    <Extension />
-                            </ListItemIcon>
+                </ListItemIcon>
-                            <ListItemText primary={pageInfo.DisplayName} />
+                <ListItemText primary={globalize.translate('TabMyPlugins')} />
-                        </ListItemLink>
+            </ListItemLink>
-                    </ListItem>
+
-                ))
+            <ListItemLink
-            }
+                to='/dashboard/plugins/catalog'
+                includePaths={[ '/dashboard/plugins/repositories' ]}
+            >
+                <ListItemIcon>
+                    <Public />
+                </ListItemIcon>
+                <ListItemText primary={globalize.translate('TabCatalog')} />
+            </ListItemLink>
+
+            {pagesInfo?.map(pageInfo => (
+                <ListItemLink
+                    key={pageInfo.PluginId}
+                    to={`/${Dashboard.getPluginUrl(pageInfo.Name)}`}
+                >
+                    <ListItemIcon>
+                        {/* TODO: Support different icons? */}
+                        <Folder />
+                    </ListItemIcon>
+                    <ListItemText primary={pageInfo.DisplayName} />
+                </ListItemLink>
+            ))}
         </List>
     );
 };