2.0 Overhaul start

src/components/PageComponents/Connect/BLE.tsx

@@ -0,0 +1,71 @@
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@components/Button.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { subscribeAll } from "@core/subscriptions.js";
+import { randId } from "@core/utils/randId.js";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { Constants, IBLEConnection } from "@meshtastic/meshtasticjs";
+
+export const BLE = (): JSX.Element => {
+  const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
+  const { addDevice } = useDeviceStore();
+  const { setSelectedDevice } = useAppStore();
+
+  const updateBleDeviceList = useCallback(async (): Promise<void> => {
+    setBleDevices(await navigator.bluetooth.getDevices());
+  }, []);
+
+  useEffect(() => {
+    void updateBleDeviceList();
+  }, [updateBleDeviceList]);
+
+  const onConnect = async (BLEDevice: BluetoothDevice) => {
+    const id = randId();
+    const device = addDevice(id);
+    setSelectedDevice(id);
+    const connection = new IBLEConnection(id);
+    await connection.connect({
+      device: BLEDevice,
+    });
+    device.addConnection(connection);
+    subscribeAll(device, connection);
+  };
+
+  return (
+    <div className="flex flex-col p-4 gap-2 w-full">
+      <div className="flex gap-2 flex-col h-48 overflow-y-auto">
+        {bleDevices.map((device, index) => (
+          <Button
+            key={index}
+            variant="secondary"
+            onClick={() => {
+              void onConnect(device);
+            }}
+          >
+            {device.name}
+          </Button>
+        ))}
+      </div>
+      <Button
+        iconBefore={<PlusCircleIcon className="w-4" />}
+        onClick={() => {
+          void navigator.bluetooth
+            .requestDevice({
+              filters: [{ services: [Constants.SERVICE_UUID] }],
+            })
+            .then((device) => {
+              const exists = bleDevices.findIndex((d) => d.id === device.id);
+              if (exists === -1) {
+                setBleDevices(bleDevices.concat(device));
+              }
+            });
+        }}
+      >
+        New device
+      </Button>
+    </div>
+  );
+};

src/components/PageComponents/Connect/HTTP.tsx

@@ -0,0 +1,77 @@
+import type React from "react";
+
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { Input } from "@app/components/form/Input.js";
+import { Toggle } from "@app/components/form/Toggle.js";
+import { Button } from "@components/Button.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { subscribeAll } from "@core/subscriptions.js";
+import { randId } from "@core/utils/randId.js";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { IHTTPConnection } from "@meshtastic/meshtasticjs";
+
+export const HTTP = (): JSX.Element => {
+  const { addDevice } = useDeviceStore();
+  const { setSelectedDevice } = useAppStore();
+  const { register, handleSubmit, control } = useForm<{
+    ip: string;
+    tls: boolean;
+  }>({
+    defaultValues: {
+      ip: "meshtastic.local",
+      tls: false,
+    },
+  });
+
+  const TLSEnabled = useWatch({
+    control,
+    name: "tls",
+    defaultValue: false,
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    const id = randId();
+    const device = addDevice(id);
+    setSelectedDevice(id);
+    const connection = new IHTTPConnection(id);
+    // TODO: Promise never resolves
+    void connection.connect({
+      address: data.ip,
+      fetchInterval: 2000,
+      tls: data.tls,
+    });
+    device.addConnection(connection);
+    subscribeAll(device, connection);
+  });
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    <form className="w-full p-4 gap-2 flex flex-col" onSubmit={onSubmit}>
+      <div className="h-48 flex flex-col gap-2">
+        <Input
+          label="IP Address/Hostname"
+          prefix={TLSEnabled ? "https://" : "http://"}
+          placeholder="000.000.000.000 / meshtastic.local"
+          {...register("ip")}
+        />
+        <Controller
+          name="tls"
+          control={control}
+          render={({ field: { value, ...rest } }) => (
+            <Toggle
+              label="Use TLS"
+              description="Description"
+              checked={value}
+              {...rest}
+            />
+          )}
+        />
+      </div>
+      <Button iconBefore={<PlusCircleIcon className="w-4" />} type="submit">
+        Connect
+      </Button>
+    </form>
+  );
+};

src/components/PageComponents/Connect/Serial.tsx

@@ -0,0 +1,75 @@
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@components/Button.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { subscribeAll } from "@core/subscriptions.js";
+import { randId } from "@core/utils/randId.js";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { ISerialConnection } from "@meshtastic/meshtasticjs";
+
+interface USBID {
+  id: number;
+  name: string;
+}
+
+export const Serial = (): JSX.Element => {
+  const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
+  const { addDevice } = useDeviceStore();
+  const { setSelectedDevice } = useAppStore();
+
+  const updateSerialPortList = useCallback(async () => {
+    setSerialPorts(await navigator.serial.getPorts());
+  }, []);
+
+  navigator.serial.addEventListener("connect", () => {
+    void updateSerialPortList();
+  });
+  navigator.serial.addEventListener("disconnect", () => {
+    void updateSerialPortList();
+  });
+  useEffect(() => {
+    void updateSerialPortList();
+  }, [updateSerialPortList]);
+
+  const onConnect = async (port: SerialPort) => {
+    const id = randId();
+    const device = addDevice(id);
+    setSelectedDevice(id);
+    const connection = new ISerialConnection(id);
+    await connection.connect({
+      port,
+    });
+    device.addConnection(connection);
+    subscribeAll(device, connection);
+  };
+
+  return (
+    <div className="flex flex-col p-4 gap-2 w-full">
+      <div className="flex gap-2 flex-col h-48 overflow-y-auto">
+        {serialPorts.map((port, index) => (
+          <Button
+            key={index}
+            variant="secondary"
+            onClick={() => {
+              void onConnect(port);
+            }}
+          >
+            {port.getInfo().usbVendorId} - {port.getInfo().usbProductId}
+          </Button>
+        ))}
+      </div>
+      <Button
+        iconBefore={<PlusCircleIcon className="w-4" />}
+        onClick={() => {
+          void navigator.serial.requestPort().then((port) => {
+            setSerialPorts(serialPorts.concat(port));
+          });
+        }}
+      >
+        New device
+      </Button>
+    </div>
+  );
+};