Move dashboard help links to header icon

src/apps/dashboard/AppLayout.tsx

@@ -16,6 +16,7 @@ import { useLocale } from 'hooks/useLocale';
 
 import AppTabs from './components/AppTabs';
 import AppDrawer from './components/drawer/AppDrawer';
+import HelpButton from './components/toolbar/HelpButton';
 import { DASHBOARD_APP_PATHS } from './routes/routes';
 
 import './AppOverrides.scss';
@@ -68,6 +69,9 @@ export const Component: FC = () => {
                                 isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
                                 isDrawerOpen={isDrawerOpen}
                                 onDrawerButtonClick={onToggleDrawer}
+                                buttons={
+                                    <HelpButton />
+                                }
                             >
                                 <AppTabs isDrawerOpen={isDrawerOpen} />
                             </AppToolbar>

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

@@ -0,0 +1,36 @@
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import IconButton from '@mui/material/IconButton/IconButton';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { HelpLinks } from 'apps/dashboard/constants/helpLinks';
+import globalize from 'lib/globalize';
+
+const HelpButton = () => (
+    <Routes>
+        {
+            HelpLinks.map(({ paths, url }) => paths.map(path => (
+                <Route
+                    key={[url, path].join('-')}
+                    path={path}
+                    element={
+                        <Tooltip title={globalize.translate('Help')}>
+                            <IconButton
+                                href={url}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                                size='large'
+                                color='inherit'
+                            >
+                                <HelpOutline />
+                            </IconButton>
+                        </Tooltip>
+                    }
+                />
+            ))).flat()
+        }
+    </Routes>
+);
+
+export default HelpButton;

src/apps/dashboard/constants/helpLinks.ts

@@ -0,0 +1,51 @@
+export const HelpLinks = [
+    {
+        paths: ['/dashboard/devices'],
+        url: 'https://jellyfin.org/docs/general/server/devices'
+    }, {
+        paths: ['/dashboard/libraries'],
+        url: 'https://jellyfin.org/docs/general/server/libraries'
+    }, {
+        paths: [
+            '/dashboard/livetv',
+            '/dashboard/livetv/tuner',
+            '/dashboard/recordings'
+        ],
+        url: 'https://jellyfin.org/docs/general/server/live-tv/'
+    }, {
+        paths: ['/dashboard/livetv/guide'],
+        url: 'https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data'
+    }, {
+        paths: ['/dashboard/networking'],
+        url: 'https://jellyfin.org/docs/general/networking/'
+    }, {
+        paths: ['/dashboard/playback/transcoding'],
+        url: 'https://jellyfin.org/docs/general/server/transcoding'
+    }, {
+        paths: [
+            '/dashboard/plugins',
+            '/dashboard/plugins/catalog'
+        ],
+        url: 'https://jellyfin.org/docs/general/server/plugins/'
+    }, {
+        paths: ['/dashboard/plugins/repositories'],
+        url: 'https://jellyfin.org/docs/general/server/plugins/#repositories'
+    }, {
+        paths: ['/dashboard/settings'],
+        url: 'https://jellyfin.org/docs/general/server/settings'
+    }, {
+        paths: ['/dashboard/tasks'],
+        url: 'https://jellyfin.org/docs/general/server/tasks'
+    }, {
+        paths: ['/dashboard/users'],
+        url: 'https://jellyfin.org/docs/general/server/users/adding-managing-users'
+    }, {
+        paths: [
+            '/dashboard/users/access',
+            '/dashboard/users/parentalcontrol',
+            '/dashboard/users/password',
+            '/dashboard/users/profile'
+        ],
+        url: 'https://jellyfin.org/docs/general/server/users/'
+    }
+];

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

@@ -150,7 +150,6 @@ const PlaybackTrickplay: FC = () => {
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={globalize.translate('Trickplay')}
-                        isLinkVisible={false}
                     />
                 </div>
 

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

@@ -138,7 +138,7 @@
         loadMediaFolders(user, mediaFolders);
         loadDevices(user, devices);
         loading.hide();
     }, [loadChannels, loadDevices, loadMediaFolders]);
 
     const loadData = useCallback(() => {
         loading.show();
@@ -236,7 +236,7 @@
         });
 
         (page.querySelector('.userLibraryAccessForm') as HTMLFormElement).addEventListener('submit', onSubmit);
     }, [loadData]);
 
     return (
         <Page
@@ -247,7 +247,6 @@
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={userName}
-                        url='https://jellyfin.org/docs/general/server/users/'
                     />
                 </div>
                 <SectionTabs activeTab='userlibraryaccess'/>

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

@@ -188,7 +188,6 @@ const UserNew = () => {
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={globalize.translate('HeaderAddUser')}
-                        url='https://jellyfin.org/docs/general/server/users/'
                     />
                 </div>
 

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

@@ -170,7 +170,6 @@ const UserProfiles = () => {
                         btnClassName='fab submit sectionTitleButton'
                         btnTitle='ButtonAddUser'
                         btnIcon='add'
-                        url='https://jellyfin.org/docs/general/server/users/adding-managing-users'
                     />
                 </div>
 

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

@@ -362,7 +362,6 @@ const UserParentalControl = () => {
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={userName}
-                        url='https://jellyfin.org/docs/general/server/users/'
                     />
                 </div>
                 <SectionTabs activeTab='userparentalcontrol'/>
@@ -406,7 +405,6 @@ const UserParentalControl = () => {
                             btnClassName='fab submit sectionTitleButton'
                             btnTitle='Add'
                             btnIcon='add'
-                            isLinkVisible={false}
                         />
                         <div className='fieldDescription'>
                             {globalize.translate('AllowContentWithTagsHelp')}
@@ -431,7 +429,6 @@ const UserParentalControl = () => {
                             btnClassName='fab submit sectionTitleButton'
                             btnTitle='Add'
                             btnIcon='add'
-                            isLinkVisible={false}
                         />
                         <div className='fieldDescription'>
                             {globalize.translate('BlockContentWithTagsHelp')}
@@ -455,7 +452,6 @@ const UserParentalControl = () => {
                             btnClassName='fab submit sectionTitleButton'
                             btnTitle='Add'
                             btnIcon='add'
-                            isLinkVisible={false}
                         />
                         <p>{globalize.translate('HeaderAccessScheduleHelp')}</p>
                         <div className='accessScheduleList paperList'>

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

@@ -42,7 +42,6 @@ const UserPassword = () => {
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={userName}
-                        url='https://jellyfin.org/docs/general/server/users/'
                     />
                 </div>
                 <SectionTabs activeTab='userpassword'/>

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

@@ -173,7 +173,7 @@
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = String(user.Policy?.MaxActiveSessions) || '0';
         (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = String(user.Policy?.SyncPlayAccess);
         loading.hide();
     }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
 
     const loadData = useCallback(() => {
         loading.show();
@@ -182,7 +182,7 @@
         }).catch(err => {
             console.error('[useredit] failed to load data', err);
         });
     }, [loadUser]);
 
     useEffect(() => {
         const page = element.current;
@@ -261,7 +261,7 @@
         (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadData]);
 
     const optionLoginProvider = authProviders.map((provider) => {
         const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
@@ -290,7 +290,6 @@
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={userDto?.Name || ''}
-                        url='https://jellyfin.org/docs/general/server/users/'
                     />
                 </div>
 

src/components/tvproviders/schedulesdirect.template.html

@@ -1,7 +1,6 @@
 <div class="verticalSection">
     <div class="sectionTitleContainer flex align-items-center">
         <h1 class="sectionTitle">Schedules Direct</h1>
-        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data">${Help}</a>
     </div>
     <p class="createAccountHelp"></p>
 </div>

src/components/tvproviders/xmltv.template.html

@@ -1,7 +1,6 @@
 <div class="verticalSection">
     <div class="sectionTitleContainer flex align-items-center">
         <h1 class="sectionTitle">Xml TV</h1>
-        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data">${Help}</a>
     </div>
 </div>
 

src/controllers/dashboard/devices/device.html

@@ -5,7 +5,6 @@
                 <div class="verticalSection verticalSection-extrabottompadding">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle reportedName"></h2>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/devices">${Help}</a>
                     </div>
 
                     <div class="inputContainer">

src/controllers/dashboard/devices/devices.html

@@ -4,8 +4,15 @@
             <div class="verticalSection verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
                     <h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
-                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/devices">${Help}</a>
-                    <button id="deviceDeleteAll" is="emby-button" type="button" class="raised button-alt headerHelpButton">${DeleteAll}</button>
+                    <button
+                        id="deviceDeleteAll"
+                        is="emby-button"
+                        type="button"
+                        class="raised button-alt"
+                        style="margin-left: 1.25em !important; padding-bottom: 0.4em !important; padding-top: 0.4em !important;"
+                    >
+                        ${DeleteAll}
+                    </button>
                 </div>
             </div>
             <div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>

src/controllers/dashboard/encodingsettings.html

@@ -5,7 +5,6 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${Transcoding}</h2>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/transcoding">${Help}</a>
                     </div>
                 </div>
 

src/controllers/dashboard/general.html

@@ -5,7 +5,6 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${Settings}</h2>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/settings">${Help}</a>
                     </div>
                 </div>
 

src/controllers/dashboard/library.html

@@ -6,7 +6,6 @@
                     <span>${ButtonScanAllLibraries}</span>
                 </button>
                 <progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
-                <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt" target="_blank" href="https://jellyfin.org/docs/general/server/libraries">${Help}</a>
             </div>
 
             <div id="divVirtualFolders"></div>

src/controllers/dashboard/networking.html

@@ -5,7 +5,6 @@
                 <div class="verticalSection verticalSection-extrabottompadding">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${TabNetworking}</h2>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/networking/">${Help}</a>
                     </div>
 
                     <fieldset class='verticalSection verticalSection-extrabottompadding'>

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

@@ -6,9 +6,6 @@ <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}" />

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

@@ -3,9 +3,6 @@
         <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}" />

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

@@ -6,9 +6,6 @@ <h2 class="sectionTitle">${TabRepositories}</h2>
                 <button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
-                <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/#repositories">
-                    ${Help}
-                </a>
             </div>
 
             <div id="repositories"></div>

src/controllers/dashboard/scheduledtasks/scheduledtask.html

@@ -4,7 +4,6 @@
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
                     <h2 class="sectionTitle taskName"></h2>
-                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/tasks">${Help}</a>
                 </div>
                 <p id="pTaskDescription"></p>
             </div>

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -33,8 +33,7 @@ function populateList(page, tasks) {
 
     let currentCategory;
     let html = '';
-    for (let i = 0; i < tasks.length; i++) {
-        const task = tasks[i];
+    for (const task of tasks) {
         if (task.Category != currentCategory) {
             currentCategory = task.Category;
             if (currentCategory) {
@@ -46,9 +45,6 @@ function populateList(page, tasks) {
             html += '<h2 class="sectionTitle">';
             html += currentCategory;
             html += '</h2>';
-            if (i === 0) {
-                html += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/tasks">' + globalize.translate('Help') + '</a>';
-            }
             html += '</div>';
             html += '<div class="paperList">';
         }

src/controllers/livetvsettings.html

@@ -4,7 +4,6 @@
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
                     <h2 class="sectionTitle">${HeaderDVR}</h2>
-                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
                 </div>
             </div>
 

src/controllers/livetvstatus.html

@@ -10,7 +10,6 @@ <h2 class="sectionTitle sectionTitle-cards">
                         <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>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
                     </div>
                     <div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
                 </div>

src/controllers/livetvtuner.html

@@ -5,7 +5,6 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h1 class="sectionTitle">${HeaderLiveTvTunerSetup}</h1>
-                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
                     </div>
                 </div>
 

src/elements/SectionTitleContainer.tsx

@@ -1,7 +1,5 @@
 import React, { FunctionComponent } from 'react';
 import IconButtonElement from './IconButtonElement';
-import LinkButton from './emby-button/LinkButton';
-import globalize from 'lib/globalize';
 
 type IProps = {
     SectionClassName?: string;
@@ -11,10 +9,8 @@ type IProps = {
     btnClassName?: string;
     btnTitle?: string;
     btnIcon?: string;
-    isLinkVisible?: boolean;
-    url?: string;
 };
-const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, title, isBtnVisible = false, btnId, btnClassName, btnTitle, btnIcon, isLinkVisible = true, url }: IProps) => {
+const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, title, isBtnVisible = false, btnId, btnClassName, btnTitle, btnIcon }: IProps) => {
     return (
         <div className={`${SectionClassName} sectionTitleContainer flex align-items-center`}>
             <h2 className='sectionTitle'>
@@ -29,14 +25,6 @@ const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, ti
                 icon={btnIcon}
             />}
 
-            {isLinkVisible && <LinkButton
-                className='raised button-alt headerHelpButton'
-                target='_blank'
-                rel='noopener noreferrer'
-                href={url}>
-                {globalize.translate('Help')}
-            </LinkButton>}
-
         </div>
     );
 };

src/styles/site.scss

@@ -99,12 +99,6 @@ form {
     }
 }
 
-.headerHelpButton {
-    margin-left: 1.25em !important;
-    padding-bottom: 0.4em !important;
-    padding-top: 0.4em !important;
-}
-
 .mediaInfoContent {
     margin-left: auto;
     margin-right: auto;