Config stuff

src/components/Dashboard.tsx

@@ -71,11 +71,12 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
   return (
     <div className="flex rounded-md border border-dashed border-slate-200 h-1/2 p-3 mb-2 dark:border-slate-700">
       {devices.length ? (
+        <div className="flex flex-col justify-between w-full">        
           <ul role="list" className="grow divide-y divide-gray-200">
             {devices.map((device, index) => {
               return (
                 <li key={device.id}>
-                <div className="px-4 py-4 sm:px-6">
+                  <div className="py-4">
                     <div className="flex items-center justify-between">
                       <p className="truncate text-sm font-medium text-accent">
                         {device.nodes.get(device.hardware.myNodeNum)?.user
@@ -103,7 +104,7 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
                       </div>
                     </div>
                     <div className="mt-1 sm:flex sm:justify-between">
-                    <div className="flex gap-2 items-center text-sm text-gray-500">
+                      <div className="flex gap-2 w-full items-center text-sm text-gray-500">
                         <UsersIcon
                           size={20}
                           className="text-gray-400"
@@ -113,7 +114,7 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
                         <Button
                           variant={devicesToFlash[index] ? "default" : "outline"}
                           size="sm"
-                        className="w-full justify-start gap-2"
+                          className="w-full gap-2 h-8"
                           onClick={() => {         
                             // TODO: HACKY AF, fix.
                             // Used to make sure page rerenders but this has issues
@@ -125,7 +126,7 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
                             // toggleDeviceFlash(device);                          
                           }}
                         >
-                        {devicesToFlash[index] ? "Yes" : "No"}
+                          {devicesToFlash[index] ? "Enabled" : "Disabled"}
                         </Button>
                       </div>
                       
@@ -135,6 +136,13 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
               );
             })}
           </ul>
+          <Button
+            className="gap-2"
+            onClick={() => setConnectDialogOpen(true)}            
+          >            
+            Flash
+          </Button>
+        </div>
       ) : (
         <div className="m-auto flex flex-col gap-3 text-center">
           <ListPlusIcon size={48} className="mx-auto text-textSecondary" />

src/components/PageComponents/Config/Device.tsx

@@ -1,20 +1,21 @@
 import type { DeviceValidation } from "@app/validation/config/device.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useConfig, useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Device = (): JSX.Element => {
-  const { config, setWorkingConfig } = useDevice();
+  // const { config, setWorkingConfig } = useDevice();
+  const config = useConfig();
 
   const onSubmit = (data: DeviceValidation) => {
-    setWorkingConfig(
+    // setWorkingConfig(
-      new Protobuf.Config({
+    //   new Protobuf.Config({
-        payloadVariant: {
+    //     payloadVariant: {
-          case: "device",
+    //       case: "device",
-          value: data
+    //       value: data
-        }
+    //     }
-      })
+    //   })
-    );
+    // );
   };
 
   return (

src/core/stores/deviceStore.ts

@@ -5,6 +5,7 @@ import { create } from "zustand";
 
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 import { channel } from "diagnostics_channel";
+import { useAppStore } from "./appStore";
 
 export type Page = "messages" | "map" | "config" | "channels" | "peers";
 
@@ -593,3 +594,12 @@ export const useDevice = (): Device => {
   }
   return context;
 };
+
+export const useConfig = (): Protobuf.Config => {
+  const context = useContext(DeviceContext);
+  if(context == undefined) {
+    const {configPresetRoot, configPresetSelected } = useAppStore();
+    return configPresetRoot.children[configPresetSelected].config;
+  }
+  return context.config;
+};

src/pages/Config/DeviceConfig.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useContext } from "react";
 import { Network } from "@components/PageComponents/Config/Network.js";
 import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
 import { Device } from "@components/PageComponents/Config/Device.js";
@@ -6,7 +6,7 @@ import { Display } from "@components/PageComponents/Config/Display.js";
 import { LoRa } from "@components/PageComponents/Config/LoRa.js";
 import { Position } from "@components/PageComponents/Config/Position.js";
 import { Power } from "@components/PageComponents/Config/Power.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { DeviceContext, useDevice } from "@core/stores/deviceStore.js";
 import {
   Tabs,
   TabsContent,
@@ -15,7 +15,7 @@ import {
 } from "@components/UI/Tabs.js";
 
 export const DeviceConfig = (): JSX.Element => {
-  const { hardware } = useDevice();
+  const device = useContext(DeviceContext);
 
   const tabs = [
     {
@@ -34,7 +34,7 @@ export const DeviceConfig = (): JSX.Element => {
     {
       label: "Network",
       element: Network,
-      disabled: !hardware.hasWifi
+      disabled: device && !device.hardware.hasWifi
     },
     {
       label: "Display",