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/core/base/BaseService.ts

@@ -45,6 +45,7 @@ export abstract class BaseService {
   protected relayHub: any = null
   protected authService: any = null
   protected nostrClientHub: any = null
+  protected visibilityService: any = null
   
   // Service state
   public readonly isInitialized: Ref<boolean> = ref(false)
@@ -134,6 +135,7 @@ export abstract class BaseService {
         this.relayHub = tryInjectService(SERVICE_TOKENS.RELAY_HUB)
         this.authService = tryInjectService(SERVICE_TOKENS.AUTH_SERVICE)
         this.nostrClientHub = tryInjectService(SERVICE_TOKENS.NOSTR_CLIENT_HUB)
+        this.visibilityService = tryInjectService(SERVICE_TOKENS.VISIBILITY_SERVICE)
         
         // Check if all required dependencies are available
         const missingDeps = this.getMissingDependencies()
@@ -181,6 +183,9 @@ export abstract class BaseService {
     if (deps.includes('NostrClientHub') && !this.nostrClientHub) {
       missing.push('NostrClientHub')
     }
+    if (deps.includes('VisibilityService') && !this.visibilityService) {
+      missing.push('VisibilityService')
+    }
     
     return missing
   }