Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/Dialog/ImportDialog.tsx

@@ -2,24 +2,29 @@ import { useEffect, useState } from "react";
 import { toByteArray } from "base64-js";
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
-import { Dialog } from "@components/generic/Dialog.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Select } from "@components/form/Select.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { Toggle } from "@components/form/Toggle.js";
-import { Button } from "@components/form/Button.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 
 export interface ImportDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   loraConfig?: Protobuf.Config_LoRaConfig;
   channels: Protobuf.Channel[];
 }
 
 export const ImportDialog = ({
-  isOpen,
-  close
+  open,
+  onOpenChange
 }: ImportDialogProps): JSX.Element => {
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
   const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
@@ -68,69 +73,73 @@ export const ImportDialog = ({
   };
 
   return (
-    <Dialog
-      title={"Import Channel Set"}
-      description={"The current LoRa configuration will be overridden."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex flex-col gap-3">
-        <Input
-          label="Channel Set/QR Code URL"
-          value={QRCodeURL}
-          suffix={validURL ? "✅" : "❌"}
-          onChange={(e) => {
-            setQRCodeURL(e.target.value);
-          }}
-        />
-        {validURL && (
-          <div className="flex flex-col gap-3">
-            <div className="flex w-full gap-2">
-              <div className="w-36">
-                <Toggle
-                  className="flex-col gap-2"
-                  label="Use Preset?"
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import Channel Set</DialogTitle>
+          <DialogDescription>
+            The current LoRa configuration will be overridden.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <Input
+            label="Channel Set/QR Code URL"
+            value={QRCodeURL}
+            suffix={validURL ? "✅" : "❌"}
+            onChange={(e) => {
+              setQRCodeURL(e.target.value);
+            }}
+          />
+          {validURL && (
+            <div className="flex flex-col gap-3">
+              <div className="flex w-full gap-2">
+                <div className="w-36">
+                  <Toggle
+                    label="Use Preset?"
+                    disabled
+                    checked={channelSet?.loraConfig?.usePreset ?? true}
+                  />
+                </div>
+                {/* <Select
+                  label="Modem Preset"
                   disabled
-                  checked={channelSet?.loraConfig?.usePreset ?? true}
-                />
+                  value={channelSet?.loraConfig?.modemPreset}
+                >
+                  {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
+                </Select> */}
               </div>
-              <Select
-                label="Modem Preset"
+              {/* <Select
+                label="Region"
                 disabled
-                value={channelSet?.loraConfig?.modemPreset}
+                value={channelSet?.loraConfig?.region}
               >
-                {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-              </Select>
-            </div>
-            <Select
-              label="Region"
-              disabled
-              value={channelSet?.loraConfig?.region}
-            >
-              {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-            </Select>
+                {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+              </Select> */}
 
-            <span className="text-md block font-medium text-textPrimary">
-              Channels:
-            </span>
-            <div className="flex w-40 flex-col gap-1">
-              {channelSet?.settings.map((channel, index) => (
-                <Checkbox
-                  key={index}
-                  label={
-                    channel.name.length
-                      ? channel.name
-                      : `Channel: ${channel.id}`
-                  }
-                />
-              ))}
+              <span className="text-md block font-medium text-textPrimary">
+                Channels:
+              </span>
+              <div className="flex w-40 flex-col gap-1">
+                {channelSet?.settings.map((channel, index) => (
+                  <Checkbox
+                    key={index}
+                    label={
+                      channel.name.length
+                        ? channel.name
+                        : `Channel: ${channel.id}`
+                    }
+                  />
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-        <Button onClick={() => apply()} disabled={!validURL}>
-          Apply
-        </Button>
-      </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button onClick={apply} disabled={!validURL}>
+            Apply
+          </Button>
+        </DialogFooter>
+      </DialogContent>
     </Dialog>
   );
 };