COnnection modal fix & notification basics

src/components/Connection.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
+import { BLE } from '@components/connection/BLE';
+import { HTTP } from '@components/connection/HTTP';
 import { Serial } from '@components/connection/Serial';
 import { Button } from '@components/generic/Button';
 import { Card } from '@components/generic/Card';
 import { Select } from '@components/generic/form/Select';
 import { Modal } from '@components/generic/Modal';
-import { DeviceStatus } from '@components/menu/buttons/DeviceStatus';
 import { connection, connectionUrl, setConnection } from '@core/connection';
 import {
   closeConnectionModal,
@@ -16,9 +17,6 @@ import {
 } from '@core/slices/appSlice';
 import { Types } from '@meshtastic/meshtasticjs';
 
-import { BLE } from './connection/BLE';
-import { HTTP } from './connection/HTTP';
-
 export const Connection = (): JSX.Element => {
   const dispatch = useAppDispatch();
 
@@ -58,23 +56,25 @@ export const Connection = (): JSX.Element => {
     >
       <Card>
         <div className="w-full max-w-3xl p-10">
-          <div className="flex justify-between w-full border rounded-md">
-            <div className="p-2">
-              <DeviceStatus />
+          {state.deviceStatus === Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
+            <div className="space-y-2">
+              <Select
+                label="Connection Method"
+                optionsEnum={connType}
+                value={appState.connType}
+                onChange={(e): void => {
+                  dispatch(setConnType(parseInt(e.target.value)));
+                }}
+              />
+              {appState.connType === connType.HTTP && <HTTP />}
+              {appState.connType === connType.BLE && <BLE />}
+              {appState.connType === connType.SERIAL && <Serial />}
             </div>
-            <div className="p-2 my-auto">
+          ) : (
+            <div>
+              <span>Connecting...</span>
               {state.deviceStatus ===
-              Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
-                <Button
-                  padding={2}
-                  border
-                  onClick={async (): Promise<void> => {
-                    await setConnection(appState.connType);
-                  }}
-                >
-                  Connect
-                </Button>
-              ) : (
+                Types.DeviceStatusEnum.DEVICE_CONNECTED && (
                 <Button
                   padding={2}
                   border
@@ -86,22 +86,6 @@ export const Connection = (): JSX.Element => {
                 </Button>
               )}
             </div>
-          </div>
-          {state.deviceStatus ===
-            Types.DeviceStatusEnum.DEVICE_DISCONNECTED && (
-            <form className="space-y-2">
-              <Select
-                label="Method"
-                optionsEnum={connType}
-                value={appState.connType}
-                onChange={(e): void => {
-                  dispatch(setConnType(parseInt(e.target.value)));
-                }}
-              />
-              {appState.connType === connType.HTTP && <HTTP />}
-              {appState.connType === connType.BLE && <BLE />}
-              {appState.connType === connType.SERIAL && <Serial />}
-            </form>
           )}
         </div>
       </Card>