Ensure up-to-date navbar extension update amount

The shown amount was based on the cached extension data from the server.
To refresh the data, the "Extensions" page had to be opened.

src/App.tsx

@@ -7,7 +7,7 @@
  */
 
 import CssBaseline from '@mui/material/CssBaseline';
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { loadable } from 'react-lazily/loadable';
@@ -31,6 +31,7 @@ import { useSessionContext } from '@/features/authentication/SessionContext.tsx'
 import { LoginPage } from '@/features/authentication/screens/LoginPage.tsx';
 import { AuthGuard } from '@/features/authentication/components/AuthGuard.tsx';
 import { SearchParam } from '@/base/Base.types.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 
 const { Browse } = loadable(() => import('@/features/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/features/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
@@ -102,6 +103,25 @@ const ScrollToTop = () => {
     return null;
 };
 
+const InitialBackgroundRequests = () => {
+    const { isAuthRequired, accessToken } = useSessionContext();
+    const skipConnection = isAuthRequired == null || (!!isAuthRequired && !accessToken);
+
+    const [fetchExtensionList] = requestManager.useExtensionListFetch();
+
+    useEffect(() => {
+        if (skipConnection) {
+            return;
+        }
+
+        // Fetch extension list on startup to show up-to-date number of available extension updates in the navigation bar
+        // without having to open the extensions page.
+        fetchExtensionList().catch(defaultPromiseErrorHandler('App::InitialBackgroundRequests: extension list'));
+    }, [skipConnection]);
+
+    return null;
+};
+
 /**
  * Creates permanent subscriptions to always have the latest data.
  *
@@ -267,6 +287,7 @@ export const App: React.FC = () => (
         <ScrollToTop />
         <ServerUpdateChecker />
         <WebUIUpdateChecker />
+        <InitialBackgroundRequests />
         <BackgroundSubscriptions />
         <CssBaseline enableColorScheme />
         <AuthGuard>