Move user settings menu to react (#6675)

* Move user settings menu to react

* Add default href value to LinkButton

* Use loading component while data is pending

src/components/Page.tsx

@@ -1,6 +1,7 @@
 import React, { type FC, type PropsWithChildren, type HTMLAttributes, useEffect, useRef, StrictMode } from 'react';
 
-import viewManager from './viewManager/viewManager';
+import autoFocuser from 'components/autoFocuser';
+import viewManager from 'components/viewManager/viewManager';
 
 type CustomPageProps = {
     id: string, // id is required for libraryMenu
@@ -9,6 +10,7 @@ type CustomPageProps = {
     isMenuButtonEnabled?: boolean,
     isNowPlayingBarEnabled?: boolean,
     isThemeMediaSupported?: boolean,
+    shouldAutoFocus?: boolean,
     backDropType?: string,
 };
 
@@ -27,6 +29,7 @@ const Page: FC<PropsWithChildren<PageProps>> = ({
     isMenuButtonEnabled = false,
     isNowPlayingBarEnabled = true,
     isThemeMediaSupported = false,
+    shouldAutoFocus = false,
     backDropType
 }) => {
     const element = useRef<HTMLDivElement>(null);
@@ -58,6 +61,12 @@ const Page: FC<PropsWithChildren<PageProps>> = ({
         element.current?.dispatchEvent(new CustomEvent('pageshow', event));
     }, [ element, isNowPlayingBarEnabled, isThemeMediaSupported ]);
 
+    useEffect(() => {
+        if (shouldAutoFocus) {
+            autoFocuser.autoFocus(element.current);
+        }
+    }, [ shouldAutoFocus ]);
+
     return (
         <StrictMode>
             <div

src/components/autoFocuser.js

@@ -35,7 +35,7 @@ export function enable() {
 
 /**
      * Set focus on a suitable element, taking into account the previously selected.
-     * @param {HTMLElement} [container] - Element to limit scope.
+     * @param {HTMLElement | null} [container] - Element to limit scope.
      * @returns {HTMLElement} Focused element.
      */
 export function autoFocus(container) {

src/components/toolbar/AppUserMenu.tsx

@@ -17,9 +17,10 @@ import { Link } from 'react-router-dom';
 
 import { appHost } from 'components/apphost';
 import { useApi } from 'hooks/useApi';
-import globalize from 'lib/globalize';
-import Dashboard from 'utils/dashboard';
 import { useQuickConnectEnabled } from 'hooks/useQuickConnect';
+import globalize from 'lib/globalize';
+import shell from 'scripts/shell';
+import Dashboard from 'utils/dashboard';
 
 export const ID = 'app-user-menu';
 
@@ -36,7 +37,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
     const { data: isQuickConnectEnabled } = useQuickConnectEnabled();
 
     const onClientSettingsClick = useCallback(() => {
-        window.NativeShell?.openClientSettings();
+        shell.openClientSettings();
         onMenuClose();
     }, [ onMenuClose ]);