Control BrowserConnectionStatus visibility via is_visible prop to preserve component state across target switches

- 'connected' reappears when changing target back to web

└── apps
    └── editor
        └── src
            └── views
                └── prompt
                    └── frontend
                        ├── Main
                        │   ├── Main.tsx
                        │   └── MainView
                        │       ├── MainView.tsx
                        │       └── components
                        │           └── BrowserConnectionStatus
                        │               └── BrowserConnectionStatus.tsx
                        ├── Prompt.tsx
                        └── hooks
                            └── use-prompt
                                └── use-prompt.ts

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -247,18 +247,17 @@ export const MainView: React.FC<Props> = (props) => {
       />
       <UiScrollable scroll_to_top_key={props.scroll_reset_key} top_shadow>
         <div className={styles.container}>
-          {props.target == TARGET.WEB && (
-            <BrowserConnectionStatus
-              is_connected={props.is_connected}
-              on_install={props.on_install_browser_extension}
-              translations={{
-                connected: t('main.browser-connection.connected'),
-                not_connected: t('main.browser-connection.not-connected'),
-                install: t('main.browser-connection.install'),
-                hide: t('main.browser-connection.hide')
-              }}
-            />
-          )}
+          <BrowserConnectionStatus
+            is_visible={props.target == TARGET.WEB}
+            is_connected={props.is_connected}
+            on_install={props.on_install_browser_extension}
+            translations={{
+              connected: t('main.browser-connection.connected'),
+              not_connected: t('main.browser-connection.not-connected'),
+              install: t('main.browser-connection.install'),
+              hide: t('main.browser-connection.hide')
+            }}
+          />
 
           {props.response_history.length > 0 && (
             <UiResponses

apps/editor/src/views/prompt/frontend/Main/MainView/components/BrowserConnectionStatus/BrowserConnectionStatus.tsx

@@ -4,6 +4,7 @@ import { Separator } from '@ui/components/editor/prompt/Separator'
 
 type Props = {
   is_connected: boolean
+  is_visible: boolean
   translations: {
     connected: string
     not_connected: string
@@ -32,7 +33,7 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
     }
   }, [props.is_connected, is_closed, has_been_closed])
 
-  if (is_closed) {
+  if (is_closed || !props.is_visible) {
     return null
   }