Show available extension updates in navbar

public/locales/en.json

@@ -281,6 +281,7 @@
     "label": {
       "add_repository_info": "You have to add a extension repository to be able to install extensions",
       "age_rating": "Age rating",
+      "available_updates": "{{count}} available updates",
       "installation_failed_one": "Could not install the extension",
       "installation_failed_other": "Could not install the extensions",
       "installed_successfully_one": "Extension installed",

src/features/navigation-bar/NavigationBar.constants.ts

@@ -59,6 +59,18 @@ const NAVIGATION_BAR_BASE_ITEMS = [
         IconComponent: ExploreOutlinedIcon,
         show: 'both',
         moreGroup: NavBarItemMoreGroup.GENERAL,
+        useBadge: () => {
+            const { t } = useTranslation();
+            const { data } = requestManager.useGetExtensionList();
+
+            const extensions = data?.extensions.nodes ?? [];
+            const availableUpdates = extensions.filter((extension) => extension.hasUpdate).length;
+
+            return {
+                count: availableUpdates,
+                title: t('extension.label.available_updates', { count: availableUpdates }),
+            };
+        },
     },
 ] as const satisfies RestrictedNavBarItem<'both'>[];