Add headings and links to plugin pages

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

@@ -77,12 +77,13 @@ const AdvancedDrawerSection = () => {
                     <ListItemLink to='/dashboard/plugins' sx={{ pl: 4 }}>
                         <ListItemText inset primary={globalize.translate('TabMyPlugins')} />
                     </ListItemLink>
-                    <ListItemLink to='/dashboard/plugins/catalog' sx={{ pl: 4 }}>
+                    <ListItemLink
+                        to='/dashboard/plugins/catalog'
+                        includePaths={[ '/dashboard/plugins/repositories' ]}
+                        sx={{ pl: 4 }}
+                    >
                         <ListItemText inset primary={globalize.translate('TabCatalog')} />
                     </ListItemLink>
-                    <ListItemLink to='/dashboard/plugins/repositories' sx={{ pl: 4 }}>
-                        <ListItemText inset primary={globalize.translate('TabRepositories')} />
-                    </ListItemLink>
                 </List>
             </Collapse>
             <ListItem disablePadding>

src/components/ListItemLink.tsx

@@ -4,6 +4,8 @@ import { Link, useLocation, useSearchParams } from 'react-router-dom';
 
 interface ListItemLinkProps extends ListItemButtonBaseProps {
     to: string
+    includePaths?: string[]
+    excludePaths?: string[]
 }
 
 const isMatchingParams = (routeParams: URLSearchParams, currentParams: URLSearchParams) => {
@@ -19,6 +21,8 @@ const isMatchingParams = (routeParams: URLSearchParams, currentParams: URLSearch
 const ListItemLink: FC<ListItemLinkProps> = ({
     children,
     to,
+    includePaths = [],
+    excludePaths = [],
     ...params
 }) => {
     const location = useLocation();
@@ -27,8 +31,11 @@ const ListItemLink: FC<ListItemLinkProps> = ({
     const [ toPath, toParams ] = to.split('?');
     // eslint-disable-next-line compat/compat
     const toSearchParams = new URLSearchParams(`?${toParams}`);
+    const selectedPaths = [ toPath, ...includePaths ];
 
-    const selected = location.pathname === toPath && (!toParams || isMatchingParams(toSearchParams, searchParams));
+    const selected = selectedPaths.includes(location.pathname)
+        && !excludePaths.includes(location.pathname + location.search)
+        && (!toParams || isMatchingParams(toSearchParams, searchParams));
 
     return (
         <ListItemButton

src/controllers/dashboard/plugins/available/index.html

@@ -1,6 +1,15 @@
 <div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent">
     <div>
         <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabCatalog}</h2>
+                <a is="emby-linkbutton" class="fab" href="#/dashboard/plugins/repositories" style="margin-left:1em;" title="${Settings}">
+                    <span class="material-icons settings" aria-hidden="true"></span>
+                </a>
+                <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/">
+                    ${Help}
+                </a>
+            </div>
             <div class="inputContainer">
                 <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
             </div>

src/controllers/dashboard/plugins/installed/index.html

@@ -1,6 +1,12 @@
 <div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent">
     <div>
         <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabMyPlugins}</h2>
+                <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/">
+                    ${Help}
+                </a>
+            </div>
             <div class="inputContainer">
                 <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
             </div>

src/styles/dashboard.scss

@@ -156,7 +156,8 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-left: 1em;
 }
 
-.content-primary ul:first-child {
+.content-primary ul:first-child,
+.type-interior .content-primary > .sectionTitleContainer {
     margin-top: 0;
 }