feat: Integrate Relay Hub for centralized Nostr connection management

- Introduce a new composable, useRelayHub, to manage all Nostr WebSocket connections, enhancing connection stability and performance.
- Update existing components and composables to utilize the Relay Hub for connecting, publishing events, and subscribing to updates, streamlining the overall architecture.
- Add a RelayHubStatus component to display connection status and health metrics, improving user feedback on the connection state.
- Implement a RelayHubDemo page to showcase the functionality of the Relay Hub, including connection tests and subscription management.
- Ensure proper error handling and logging throughout the integration process to facilitate debugging and user experience.

src/App.vue

@@ -9,6 +9,7 @@ import 'vue-sonner/style.css'
 import { auth } from '@/composables/useAuth'
 import { useMarketPreloader } from '@/composables/useMarketPreloader'
 import { nostrChat } from '@/composables/useNostrChat'
+import { useRelayHub } from '@/composables/useRelayHub'
 import { toast } from 'vue-sonner'
 
 const route = useRoute()
@@ -17,6 +18,9 @@ const showLoginDialog = ref(false)
 // Initialize preloader
 const marketPreloader = useMarketPreloader()
 
+// Initialize relay hub
+const relayHub = useRelayHub()
+
 // Hide navbar on login page
 const showNavbar = computed(() => {
   return route.path !== '/login'
@@ -50,6 +54,14 @@ onMounted(async () => {
   } catch (error) {
     console.error('Failed to initialize authentication:', error)
   }
+
+  // Initialize relay hub
+  try {
+    await relayHub.initialize()
+    console.log('Relay hub initialized successfully')
+  } catch (error) {
+    console.error('Failed to initialize relay hub:', error)
+  }
 })
 
 // Watch for authentication changes and trigger preloading