Frontend bt connectionstatus styling

frontends/web/src/api/bluetooth.ts

@@ -21,22 +21,21 @@ export type TPeripheral = {
   identifier: string;
   name: string;
 } & (
-  | {
-      connectionState: 'discovered' | 'connecting' | 'connected';
-    }
-  | {
-      connectionState: 'error';
-      connectionError: string;
-    }
+  {
+    connectionState: 'discovered' | 'connecting' | 'connected';
+  } | {
+    connectionState: 'error';
+    connectionError: string;
+  }
 );
 
-export type TState = {
+type TBluetoothState = {
   bluetoothAvailable: boolean;
   scanning: boolean;
   peripherals: TPeripheral[];
 };
 
-export const getState = (): Promise<TState> => {
+export const getState = (): Promise<TBluetoothState> => {
   return apiGet('bluetooth/state');
 };
 
@@ -45,7 +44,7 @@ export const connect = (identifier: string): Promise<void> => {
 };
 
 export const syncState = (
-  cb: (state: TState) => void
+  cb: (state: TBluetoothState) => void
 ): TUnsubscribe => {
   return subscribeEndpoint('bluetooth/state', cb);
 };

frontends/web/src/components/actionable-item/actionable-item.tsx

@@ -22,36 +22,35 @@ type TProps = {
   className?: string;
   disabled?: boolean;
   children: ReactNode;
+  icon?: ReactNode;
   onClick?: () => void;
 }
 
 export const ActionableItem = ({
   className = '',
   disabled,
   children,
+  icon,
   onClick,
 }: TProps) => {
   const notButton = disabled || onClick === undefined;
 
-  const content = (
-    <div className={styles.content}>
-      {children}
-      <ChevronRightDark />
-    </div>
-  );
-
   return (
     <>
       {notButton ? (
         <div className={`${styles.container} ${className}`}>
-          {content}
+          {children}
+          {icon && icon}
         </div>
       ) : (
         <button
           type="button"
           className={`${styles.container} ${styles.isButton} ${className}`}
           onClick={onClick}>
-          {content}
+          {children}
+          {icon ? icon : (
+            <ChevronRightDark />
+          )}
         </button>
       )}
     </>

frontends/web/src/components/bluetooth/bluetooth.tsx

@@ -16,50 +16,71 @@
 
 import { useTranslation } from 'react-i18next';
 import { useSync } from '@/hooks/api';
-import { connect, getState, syncState } from '@/api/bluetooth';
+import { connect, getState, syncState, TPeripheral } from '@/api/bluetooth';
 import { runningInIOS } from '@/utils/env';
+import { Status } from '@/components/status/status';
 import { ActionableItem } from '@/components/actionable-item/actionable-item';
 import { Badge } from '@/components/badge/badge';
+import { HorizontallyCenteredSpinner, SpinnerRingAnimated } from '@/components/spinner/SpinnerAnimation';
 import styles from './bluetooth.module.css';
 
+const isConnectedOrConnecting = (peripheral: TPeripheral) => {
+  return peripheral.connectionState === 'connecting' || peripheral.connectionState === 'connected';
+};
+
 const _Bluetooth = () => {
   const { t } = useTranslation();
   const state = useSync(getState, syncState);
   if (!state) {
     return null;
   }
   if (!state.bluetoothAvailable) {
-    return <>Please turn on Bluetooth</>;
+    return (
+      <Status type="warning">
+        {t('bluetooth.enable')}
+      </Status>
+    );
   }
+  const hasConnection = state.peripherals.some(isConnectedOrConnecting);
   return (
     <>
       <div className={styles.label}>
         {t('bluetooth.select')}
       </div>
       <div className={styles.container}>
-        { state.scanning ? 'scanning' : null }
         {state.peripherals.map(peripheral => {
+          const onClick = !hasConnection ? () => connect(peripheral.identifier) : undefined;
+          const connectingIcon = peripheral.connectionState === 'connecting' ? (
+            <SpinnerRingAnimated />
+          ) : undefined;
           return (
             <ActionableItem
               key={peripheral.identifier}
-              onClick={() => connect(peripheral.identifier)}>
+              icon={connectingIcon}
+              onClick={onClick}>
               <span>
                 { peripheral.name !== '' ? peripheral.name : peripheral.identifier }
                 {' '}
+                { peripheral.connectionState === 'connected' ? (
+                  <Badge type="success">
+                    {t('bluetooth.connected')}
+                  </Badge>
+                ) : null }
                 { peripheral.connectionState === 'error' ? (
                   <Badge type="danger">
-                    {t('bluetooth.connectionFailed')}
+                    <span style={{ whiteSpace: 'wrap' }}>
+                      {peripheral.connectionError}
+                    </span>
                   </Badge>
                 ) : null }
-                { peripheral.connectionState === 'error' ? (
-                  <p>{ peripheral.connectionError }</p>
-                ) : peripheral.connectionState }
               </span>
-
             </ActionableItem>
           );
         })}
       </div>
+      {state.scanning && (
+        <HorizontallyCenteredSpinner />
+      )}
     </>
   );
 };

frontends/web/src/locales/en/app.json

@@ -367,7 +367,9 @@
     "button": "Blink"
   },
   "bluetooth": {
+    "connected": "connected",
     "connectionFailed": "failed",
+    "enable": "Please turn on Bluetooth",
     "select": "Select your BitBox"
   },
   "bootloader": {