feat: Update useRelayHub to manage reactive relay and subscription counts

- Introduce reactive properties for connectedRelayCount, totalRelayCount, and totalSubscriptionCount in useRelayHub.ts to track relay and subscription states.
- Enhance event listeners in useRelayHub to update these counts on connection and subscription events.
- Simplify getter methods in relayHub.ts by removing unnecessary logging and directly returning counts.
- Emit subscriptionCreated and subscriptionRemoved events to keep track of active subscriptions.

src/composables/useRelayHub.ts

@@ -9,11 +9,13 @@ export function useRelayHub() {
   const relayStatuses = ref<RelayStatus[]>([])
   const error = ref<Error | null>(null)
   const activeSubscriptions = ref<Set<string>>(new Set())
+  
+  // Reactive relay counts - these will be updated when relayHub state changes
+  const connectedRelayCount = ref(0)
+  const totalRelayCount = ref(0)
+  const totalSubscriptionCount = ref(0)
 
   // Computed properties
-  const connectedRelayCount = computed(() => relayHub.connectedRelayCount)
-  const totalRelayCount = computed(() => relayHub.totalRelayCount)
-  const totalSubscriptionCount = computed(() => relayHub.totalSubscriptionCount)
   const connectionHealth = computed(() => {
     if (totalRelayCount.value === 0) return 0
     return (connectedRelayCount.value / totalRelayCount.value) * 100
@@ -152,20 +154,25 @@ export function useRelayHub() {
     return relayHub.isRelayConnected(url)
   }
 
-  // Setup event listeners for the relay hub
+  // Set up event listeners for relay hub events
   const setupEventListeners = (): void => {
-    // Connection events
     relayHub.on('connected', (count: number) => {
-      console.log(`Connected to ${count} relays`)
+      console.log('Connected to relays:', count)
       isConnected.value = true
       connectionStatus.value = 'connected'
       error.value = null
+      connectedRelayCount.value = count
+      totalRelayCount.value = relayHub.totalRelayCount
+      totalSubscriptionCount.value = relayHub.totalSubscriptionCount
     })
 
     relayHub.on('disconnected', () => {
       console.log('Disconnected from all relays')
       isConnected.value = false
       connectionStatus.value = 'disconnected'
+      error.value = null
+      connectedRelayCount.value = 0
+      totalSubscriptionCount.value = 0
     })
 
     relayHub.on('connectionError', (err: Error) => {
@@ -173,18 +180,22 @@ export function useRelayHub() {
       error.value = err
       connectionStatus.value = 'error'
       isConnected.value = false
+      connectedRelayCount.value = 0
     })
 
     relayHub.on('allRelaysDisconnected', () => {
       console.warn('All relays disconnected')
       isConnected.value = false
       connectionStatus.value = 'disconnected'
+      connectedRelayCount.value = 0
     })
 
     relayHub.on('partialDisconnection', ({ connected, total }: { connected: number; total: number }) => {
       console.warn(`Partial disconnection: ${connected}/${total} relays connected`)
       isConnected.value = connected > 0
       connectionStatus.value = connected > 0 ? 'connected' : 'disconnected'
+      connectedRelayCount.value = connected
+      totalRelayCount.value = total
     })
 
     relayHub.on('maxReconnectAttemptsReached', () => {
@@ -192,17 +203,34 @@ export function useRelayHub() {
       connectionStatus.value = 'error'
       isConnected.value = false
       error.value = new Error('Max reconnection attempts reached')
+      connectedRelayCount.value = 0
     })
 
     relayHub.on('networkOffline', () => {
       console.log('Network went offline')
       connectionStatus.value = 'disconnected'
       isConnected.value = false
+      connectedRelayCount.value = 0
+    })
+
+    // Subscription events
+    relayHub.on('subscriptionCreated', ({ count }: { id: string; count: number }) => {
+      console.log('Subscription created, total count:', count)
+      totalSubscriptionCount.value = count
+    })
+
+    relayHub.on('subscriptionRemoved', ({ count }: { id: string; count: number }) => {
+      console.log('Subscription removed, total count:', count)
+      totalSubscriptionCount.value = count
     })
 
     // Update relay statuses periodically
     const updateRelayStatuses = () => {
       relayStatuses.value = relayHub.relayStatuses
+      // Also update the reactive counts to keep them in sync
+      connectedRelayCount.value = relayHub.connectedRelayCount
+      totalRelayCount.value = relayHub.totalRelayCount
+      totalSubscriptionCount.value = relayHub.totalSubscriptionCount
     }
 
     // Update immediately and then every 10 seconds

src/lib/nostr/relayHub.ts

@@ -86,9 +86,7 @@ export class RelayHub extends EventEmitter {
 
   get connectedRelayCount(): number {
     // Return the actual size of connectedRelays map
-    const count = this.connectedRelays.size
-    console.log('🔍 connectedRelayCount getter called, returning:', count)
-    return count
+    return this.connectedRelays.size
   }
 
   get totalRelayCount(): number {
@@ -100,19 +98,11 @@ export class RelayHub extends EventEmitter {
   }
 
   get relayStatuses(): RelayStatus[] {
-    console.log('🔍 relayStatuses getter called')
-    console.log('🔍 relayConfigs size:', this.relayConfigs.size)
-    console.log('🔍 connectedRelays size:', this.connectedRelays.size)
-    console.log('🔍 connectedRelays keys:', Array.from(this.connectedRelays.keys()))
-    
     return Array.from(this.relayConfigs.values()).map(config => {
       const relay = this.connectedRelays.get(config.url)
-      const isConnected = !!relay
-      console.log(`🔍 Relay ${config.url}: connected=${isConnected}, relay=${relay ? 'exists' : 'null'}`)
-      
       return {
         url: config.url,
-        connected: isConnected,
+        connected: !!relay,
         lastSeen: relay ? Date.now() : 0,
         error: relay ? undefined : 'Not connected',
         latency: relay ? 0 : undefined // TODO: Implement actual latency measurement
@@ -269,6 +259,9 @@ export class RelayHub extends EventEmitter {
 
     // Store subscription for cleanup
     this.subscriptions.set(config.id, subscription)
+    
+    // Emit subscription created event
+    this.emit('subscriptionCreated', { id: config.id, count: this.subscriptions.size })
 
     // Return unsubscribe function
     return () => {
@@ -285,6 +278,9 @@ export class RelayHub extends EventEmitter {
       subscription.close()
       this.subscriptions.delete(subscriptionId)
       console.log(`Unsubscribed from ${subscriptionId}`)
+      
+      // Emit subscription removed event
+      this.emit('subscriptionRemoved', { id: subscriptionId, count: this.subscriptions.size })
     }
   }