status-bar: make visibility depend on runtime state

Change dependency on Bluetooth connection state to runtime state. This
way it works for USB connection as well.

Author: dlech

src/status-bar/StatusBar.test.tsx

@@ -1,10 +1,11 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2023 The Pybricks Authors
+// Copyright (c) 2021-2025 The Pybricks Authors
 
 import { act, waitFor } from '@testing-library/react';
 import React from 'react';
 import { testRender } from '../../test';
 import { BleConnectionState } from '../ble/reducers';
+import { HubRuntimeState } from '../hub/reducers';
 import StatusBar from './StatusBar';
 
 it('should show popover when hub name is clicked', async () => {
@@ -19,6 +20,7 @@ it('should show popover when hub name is clicked', async () => {
             deviceLowBatteryWarning: false,
             deviceBatteryCharging: false,
         },
+        hub: { runtime: HubRuntimeState.Idle },
     });
 
     await act(() => user.click(statusBar.getByText(testHubName)));
@@ -38,6 +40,7 @@ it('should show popover when battery is clicked', async () => {
             deviceLowBatteryWarning: false,
             deviceBatteryCharging: false,
         },
+        hub: { runtime: HubRuntimeState.Idle },
     });
 
     await act(() => user.click(statusBar.getByTitle('Battery')));

src/status-bar/StatusBar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2025 The Pybricks Authors
 
 import './status-bar.scss';
 import {
@@ -16,8 +16,8 @@ import {
 import { Disable, Error, TickCircle } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
-import { BleConnectionState } from '../ble/reducers';
 import { CompletionEngineStatus } from '../editor/redux/codeCompletion';
+import { HubRuntimeState } from '../hub/reducers';
 import { useSelector } from '../reducers';
 import { useI18n } from './i18n';
 
@@ -144,7 +144,7 @@ const BatteryIndicator: React.FunctionComponent = () => {
 };
 
 const StatusBar: React.FunctionComponent = () => {
-    const connection = useSelector((s) => s.ble.connection);
+    const runtime = useSelector((s) => s.hub.runtime);
 
     return (
         <div
@@ -156,7 +156,7 @@ const StatusBar: React.FunctionComponent = () => {
                 <CompletionEngineIndicator />
             </div>
             <div className="pb-status-bar-group">
-                {connection === BleConnectionState.Connected && (
+                {runtime !== HubRuntimeState.Disconnected && (
                     <>
                         <HubInfoButton />
                         <BatteryIndicator />