Add VisibilityService for managing app visibility state and connection recovery

- Introduce a new VisibilityService to handle application visibility state, including online/offline status and connection management.
- Update DI container to register the new VisibilityService and integrate it into the base module.
- Modify BaseService to include visibilityService as a dependency, ensuring proper initialization and error handling.
- Enhance RelayHub to register with VisibilityService for improved connection management during visibility changes.
- Refactor related components to utilize the new service, streamlining visibility handling across the application.

src/modules/base/index.ts

@@ -10,8 +10,9 @@ import { auth } from './auth/auth-service'
 // Import PWA services
 import { pwaService } from './pwa/pwa-service'
 
-// Import payment service
+// Import core services
 import { paymentService } from '@/core/services/PaymentService'
+import { visibilityService } from '@/core/services/VisibilityService'
 
 /**
  * Base Module Plugin
@@ -34,6 +35,9 @@ export const baseModule: ModulePlugin = {
     // Register payment service
     container.provide(SERVICE_TOKENS.PAYMENT_SERVICE, paymentService)
     
+    // Register visibility service
+    container.provide(SERVICE_TOKENS.VISIBILITY_SERVICE, visibilityService)
+    
     // Register PWA service
     container.provide('pwaService', pwaService)
 
@@ -48,6 +52,10 @@ export const baseModule: ModulePlugin = {
       waitForDependencies: true, // PaymentService depends on AuthService
       maxRetries: 3
     })
+    await visibilityService.initialize({
+      waitForDependencies: false, // VisibilityService has no dependencies
+      maxRetries: 1
+    })
     
     console.log('✅ Base module installed successfully')
   },