feat(ui): add flag for connected status

Author: psychedelicious

invokeai/frontend/web/src/features/ui/layouts/navigation-api.test.ts

@@ -127,6 +127,7 @@ describe('AppNavigationApi', () => {
 
   describe('Basic Connection', () => {
     it('should connect to app', () => {
+      expect(navigationApi.$isConnected.get()).toBe(false);
       navigationApi.connectToApp(mockAppApi);
 
       expect(navigationApi._app).not.toBeNull();
@@ -135,13 +136,15 @@ describe('AppNavigationApi', () => {
       expect(navigationApi._app?.storage.set).toBe(mockSetStorage);
       expect(navigationApi._app?.storage.get).toBe(mockGetStorage);
       expect(navigationApi._app?.storage.delete).toBe(mockDeleteStorage);
+      expect(navigationApi.$isConnected.get()).toBe(true);
     });
 
     it('should disconnect from app', () => {
       navigationApi.connectToApp(mockAppApi);
       navigationApi.disconnectFromApp();
 
       expect(navigationApi._app).toBeNull();
+      expect(navigationApi.$isConnected.get()).toBe(false);
     });
   });
 

invokeai/frontend/web/src/features/ui/layouts/navigation-api.ts

@@ -112,20 +112,28 @@ export class NavigationApi {
    */
   _app: NavigationAppApi | null = null;
 
+  /**
+   * A flag indicating if the application is currently connected to the navigation API.
+   */
+  private _$isConnected = atom(false);
+  $isConnected: Atom<boolean> = this._$isConnected;
+
   /**
    * Connect to the application to manage tab switching.
    * @param api - The application API that provides methods to set and get the current app tab and manage panel
    *    state storage.
    */
   connectToApp = (api: NavigationAppApi): void => {
     this._app = api;
+    this._$isConnected.set(true);
   };
 
   /**
    * Disconnect from the application, clearing the tab management functions.
    */
   disconnectFromApp = (): void => {
     this._app = null;
+    this._$isConnected.set(false);
   };
 
   /**