feat: Enhance RelayHub component with subscription count details (still not working)

- Update RelayHubStatus.vue to display both local and global subscription counts, improving user visibility into active subscriptions.
- Add totalSubscriptionCount computed property in useRelayHub.ts to track the total number of subscriptions.
- Implement totalSubscriptionCount getter in relayHub.ts to return the size of the subscriptions map.
- Include debug logging in relayHub.ts for connected relay counts and statuses to aid in troubleshooting.

src/components/RelayHubStatus.vue

@@ -56,7 +56,10 @@
 
     <div class="subscription-info">
       <h4>Active Subscriptions</h4>
-      <div class="subscription-count">{{ activeSubscriptions.size }}</div>
+      <div class="subscription-count">
+        <div>Local: {{ activeSubscriptions.size }}</div>
+        <div>Global: {{ totalSubscriptionCount }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -72,6 +75,7 @@ const {
   activeSubscriptions,
   connectedRelayCount,
   totalRelayCount,
+  totalSubscriptionCount,
   connectionHealth,
   connect,
   disconnect,

src/composables/useRelayHub.ts

@@ -13,6 +13,7 @@ export function useRelayHub() {
   // 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
@@ -250,6 +251,7 @@ export function useRelayHub() {
     // Computed
     connectedRelayCount,
     totalRelayCount,
+    totalSubscriptionCount,
     connectionHealth,
     
     // Methods

src/lib/nostr/relayHub.ts

@@ -85,19 +85,34 @@ export class RelayHub extends EventEmitter {
   }
 
   get connectedRelayCount(): number {
-    return this.connectedRelays.size
+    // Return the actual size of connectedRelays map
+    const count = this.connectedRelays.size
+    console.log('🔍 connectedRelayCount getter called, returning:', count)
+    return count
   }
 
   get totalRelayCount(): number {
     return this.relayConfigs.size
   }
 
+  get totalSubscriptionCount(): number {
+    return this.subscriptions.size
+  }
+
   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: !!relay,
+        connected: isConnected,
         lastSeen: relay ? Date.now() : 0,
         error: relay ? undefined : 'Not connected',
         latency: relay ? 0 : undefined // TODO: Implement actual latency measurement

src/lib/utils/formatting.ts

@@ -78,3 +78,4 @@ export function formatWalletBalance(balanceMsat: number, locale: string = 'en-US
   }
   return formatMsats(balanceMsat, locale)
 }
+

test-formatting.html

@@ -296,3 +296,4 @@
     </script>
 </body>
 </html>
+