front end feature to showing pending connection request in sidebar.

frontend/src/lib/api/organization.ts

@@ -46,6 +46,11 @@ export const organizationApi = {
     return response.data;
   },
 
+  pendingIncomingCount: async (): Promise<{ success: boolean; data: { count: number } }> => {
+    const response = await apiClient.get('/organizations/connections/pending-count');
+    return response.data;
+  },
+
   listInvitations: async (): Promise<{
     success: boolean;
     data: { items: OrganizationInvitationHistoryItemDto[] };

frontend/src/lib/hooks/usePendingConnectionsCount.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { canViewTab } from '@/components/shared/permissions';
+import { organizationApi } from '@/lib/api/organization';
+import { useAuth } from '@/lib/hooks/useAuth';
+
+/** Tell the sidebar badge to refetch after accept/decline on the organizations page. */
+export function notifyPendingConnectionsChanged() {
+  window.dispatchEvent(new Event('pending-connections-changed'));
+}
+
+/**
+ * Sidebar-only: fetches GET /organizations/connections/pending-count.
+ * Independent from the organizations tab list API.
+ */
+export function usePendingConnectionsCount(): number {
+  const pathname = usePathname();
+  const { currentOrganization } = useAuth();
+  const [count, setCount] = useState(0);
+
+  const fetchCount = useCallback(async () => {
+    if (!currentOrganization?.id || !canViewTab(currentOrganization, 'TAB_ORGANIZATIONS_READ')) {
+      setCount(0);
+      return;
+    }
+
+    try {
+      const res = await organizationApi.pendingIncomingCount();
+      setCount(res.data.count);
+    } catch {
+      setCount(0);
+    }
+  }, [currentOrganization]);
+
+  useEffect(() => {
+    void fetchCount();
+  }, [fetchCount, pathname]);
+
+  useEffect(() => {
+    const onChanged = () => void fetchCount();
+    window.addEventListener('pending-connections-changed', onChanged);
+    return () => window.removeEventListener('pending-connections-changed', onChanged);
+  }, [fetchCount]);
+
+  return count;
+}