feat: badge count on Federation tab for pending approval requests

packages/web/src/components/modals/settingsPanels/InstancePanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useSettingsStore } from '../../../stores/settingsStore';
 import { useSettingsSections } from '../../../hooks/useSettingsSections';
 import type { SettingsSection } from '../SettingsSectionsContext';
@@ -11,26 +11,27 @@ import { UsersPanel } from '../instanceSettingsPanels/UsersPanel';
 
 type SubTab = 'general' | 'federation' | 'streaming' | 'storage' | 'users';
 
-const SECTIONS: SettingsSection[] = [
-  { id: 'general', label: 'General' },
-  { id: 'federation', label: 'Federation' },
-  { id: 'streaming', label: 'Streaming' },
-  { id: 'storage', label: 'Storage' },
-  { id: 'users', label: 'Users' },
-];
-
 export function InstancePanel() {
   const fetchInstanceSettings = useSettingsStore((s) => s.fetchInstanceSettings);
   const fetchStreamingLimits = useSettingsStore((s) => s.fetchStreamingLimits);
 
   const [subTab, setSubTab] = useState<SubTab>('general');
+  const [approvalCount, setApprovalCount] = useState(0);
+
+  const sections = useMemo<SettingsSection[]>(() => [
+    { id: 'general', label: 'General' },
+    { id: 'federation', label: 'Federation', badgeCount: approvalCount },
+    { id: 'streaming', label: 'Streaming' },
+    { id: 'storage', label: 'Storage' },
+    { id: 'users', label: 'Users' },
+  ], [approvalCount]);
 
   const handleNavigate = useCallback((id: string) => {
     setSubTab(id as SubTab);
   }, []);
 
   // Register sections for sidebar sub-links (tab mode — no scroll-spy)
-  useSettingsSections(SECTIONS, { onNavigate: handleNavigate, activeTab: subTab });
+  useSettingsSections(sections, { onNavigate: handleNavigate, activeTab: subTab });
 
   useEffect(() => {
     fetchInstanceSettings();
@@ -42,7 +43,7 @@ export function InstancePanel() {
       <SettingsTabBar />
 
       {subTab === 'general' && <GeneralPanel />}
-      {subTab === 'federation' && <FederationPanel />}
+      {subTab === 'federation' && <FederationPanel onApprovalCountChange={setApprovalCount} />}
       {subTab === 'streaming' && <StreamingPanel />}
       {subTab === 'storage' && <StoragePanel />}
       {subTab === 'users' && <UsersPanel />}