Add barebones flashing page

src/components/DeviceSetup.tsx

@@ -12,9 +12,11 @@ export const DeviceSetup = (): JSX.Element => {
     const { getDevices } = useDeviceStore();
     const testDevice = getDevices()[0];
 
+    if(!testDevice)
+        return (<Mono>Currently needs at least one device.</Mono>)
+
     return (
         <DeviceWrapper device={testDevice}>
-            
             <SidebarSetup/>
             <PageNav pages={pagesSetup}/>
             <PageRouter/>            

src/components/PageNav.tsx

@@ -96,7 +96,7 @@ export const pagesSetup: NavLink[] = [
   {
     name: "Setup",
     icon: <BeakerIcon />,
-    page: "extensions"
+    page: "setup"
   },
   {
     name: "Config",

src/components/SidebarSetup.tsx

@@ -25,8 +25,7 @@ export const SidebarSetup = (): JSX.Element => {
 
   const { getDevices } = useDeviceStore();
   const devices = getDevices();
-  const [devicesToFlash, setSelectedToFlash] = useState<boolean[]>(devices.map(d => false));  
+  const devicesToFlash = devices.map(d => d.selectedToFlash);
-  console.log(`Device 0: ${devicesToFlash[0]}`);
 
   return (    
     <div className="bg-slate-50 relative flex flex-col w-72 flex-shrink-0 flex-col gap-2 p-2">
@@ -39,7 +38,7 @@ export const SidebarSetup = (): JSX.Element => {
               onClick={() => {
                 devicesToFlash[index] = !devicesToFlash[index];
                 console.log(`Set device ${index}: ${devicesToFlash[index]}`);
-                setSelectedToFlash(devicesToFlash.map(b => b));                
+                device.setSelectedToFlash(devicesToFlash[index]);
               }}
               size="sm"
             >
@@ -50,7 +49,7 @@ export const SidebarSetup = (): JSX.Element => {
         </div>
       </div>      
       <div className="w-1/1 h-0.5 bg-accent"></div>
-      <div className="h-1/2">{<Mono>Test2</Mono>}</div>
+      <div className="h-1/2">{<Mono>(Configurations go here)</Mono>}</div>
       
     </div>
   );

src/core/stores/deviceStore.ts

@@ -70,6 +70,7 @@ export interface Device {
   shutdownDialogOpen: boolean;
   rebootDialogOpen: boolean;
   pendingSettingsChanges: boolean;
+  selectedToFlash: boolean;
 
   setReady(ready: boolean): void;
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -81,6 +82,7 @@ export interface Device {
   setPeerInfoOpen: (open: boolean) => void;
   setActivePeer: (peer: number) => void;
   setPendingSettingsChanges: (state: boolean) => void;
+  setSelectedToFlash: (state: boolean) => void;
   addChannel: (channel: Channel) => void;
   addWaypoint: (waypoint: Protobuf.Waypoint) => void;
   addNodeInfo: (nodeInfo: Protobuf.NodeInfo) => void;
@@ -142,6 +144,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           shutdownDialogOpen: false,
           rebootDialogOpen: false,
           pendingSettingsChanges: false,
+          selectedToFlash: false,
 
           setReady: (ready: boolean) => {
             set(
@@ -313,6 +316,16 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               })
             );
           },
+          setSelectedToFlash: (state) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.selectedToFlash = state;
+                }
+              })
+            );
+          },
           addChannel: (channel: Channel) => {
             set(
               produce<DeviceState>((draft) => {

src/pages/Setup.tsx

@@ -8,10 +8,31 @@ import {
   ArrowDownOnSquareStackIcon,
   QrCodeIcon
 } from "@heroicons/react/24/outline";
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { IBLEConnection, ISerialConnection, Protobuf } from "@meshtastic/meshtasticjs";
 import { Mono } from "@app/components/generic/Mono";
+import { useDeviceStore } from "@app/core/stores/deviceStore";
 
 export const SetupPage = (): JSX.Element => {
+  const { getDevices } = useDeviceStore();
+  const devices = getDevices();
+
+  return (
+    <div className="m-auto text-center w-64 pt-24">
+      <Mono>Devices to flash: {devices.filter(d => d.selectedToFlash).length}/{devices.length}</Mono><br/>
+      <Button
+        onClick={async () => {
+          const serialPort = (devices[0].connection instanceof ISerialConnection) ? await devices[0].connection.getPort() : undefined;
+          if(!serialPort)
+            throw "Not a serial port -- fix!";
+          // --> Here we flash
+        }}
+      >
+        Flash
+      </Button>
+    </div>
+  );
+
+
     return ( <Mono>Setup page goes here</Mono> )
   const { channels, setQRDialogOpen, setImportDialogOpen } = useDevice();