add new dialogs & cleanup

src/components/Dialog/DialogManager.tsx

@@ -3,8 +3,20 @@ import type React from "react";
 import { useDevice } from "@app/core/providers/useDevice.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 
+import { RebootDialog } from "./RebootDialog.js";
+import { ShutdownDialog } from "./ShutdownDialog.js";
+
 export const DialogManager = (): JSX.Element => {
-  const { channels, config, QRDialogOpen, setQRDialogOpen } = useDevice();
+  const {
+    channels,
+    config,
+    QRDialogOpen,
+    setQRDialogOpen,
+    shutdownDialogOpen,
+    setShutdownDialogOpen,
+    rebootDialogOpen,
+    setRebootDialogOpen
+  } = useDevice();
   return (
     <>
       <QRDialog
@@ -15,6 +27,18 @@ export const DialogManager = (): JSX.Element => {
         channels={channels.map((ch) => ch.config)}
         loraConfig={config.lora}
       />
+      <ShutdownDialog
+        isOpen={shutdownDialogOpen}
+        close={() => {
+          setShutdownDialogOpen(false);
+        }}
+      />
+      <RebootDialog
+        isOpen={rebootDialogOpen}
+        close={() => {
+          setRebootDialogOpen(false);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/ImportDialog.tsx

@@ -1,125 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-import { fromByteArray } from "base64-js";
-import { toast } from "react-hot-toast";
-import { QRCode } from "react-qrcode-logo";
-
-import { Checkbox } from "@components/form/Checkbox.js";
-import { IconButton } from "@components/form/IconButton.js";
-import { Input } from "@components/form/Input.js";
-import { Dialog } from "@headlessui/react";
-import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { Protobuf } from "@meshtastic/meshtasticjs";
-
-export interface ImportDialogProps {
-  isOpen: boolean;
-  close: () => void;
-  loraConfig?: Protobuf.Config_LoRaConfig;
-  channels: Protobuf.Channel[];
-}
-
-export const ImportDialog = ({
-  isOpen,
-  close,
-  loraConfig,
-  channels
-}: ImportDialogProps): JSX.Element => {
-  const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
-  const [QRCodeURL, setQRCodeURL] = useState<string>("");
-
-  useEffect(() => {
-    const channelsToEncode = channels
-      .filter((channel) => selectedChannels.includes(channel.index))
-      .map((channel) => channel.settings)
-      .filter((ch): ch is Protobuf.ChannelSettings => !!ch);
-    const encoded = Protobuf.ChannelSet.toBinary({
-      loraConfig,
-      settings: channelsToEncode
-    });
-    const base64 = fromByteArray(encoded)
-      .replace(/=/g, "")
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_");
-
-    setQRCodeURL(`https://meshtastic.org/e/#${base64}`);
-  }, [channels, selectedChannels, loraConfig]);
-
-  return (
-    <Dialog open={isOpen} onClose={close}>
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel>
-          <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
-            <div className="flex px-4 py-5 sm:px-6">
-              <div>
-                <h1 className="text-lg font-bold">Generate QR Code</h1>
-                <h5 className="text-sm text-slate-600">
-                  The current LoRa configuration will also be shared.
-                </h5>
-              </div>
-              <IconButton
-                onClick={close}
-                className="my-auto ml-auto"
-                size="sm"
-                variant="secondary"
-                icon={<XMarkIcon className="h-4" />}
-              />
-            </div>
-            <div className="flex gap-3 px-4 py-5 sm:p-6">
-              <div className="flex w-40 flex-col gap-1">
-                {channels.map((channel) => (
-                  <Checkbox
-                    key={channel.index}
-                    disabled={
-                      channel.index === 0 ||
-                      channel.role === Protobuf.Channel_Role.DISABLED
-                    }
-                    label={
-                      channel.settings?.name.length
-                        ? channel.settings.name
-                        : channel.role === Protobuf.Channel_Role.PRIMARY
-                        ? "Primary"
-                        : `Channel: ${channel.index}`
-                    }
-                    checked={selectedChannels.includes(channel.index)}
-                    onChange={() => {
-                      if (selectedChannels.includes(channel.index)) {
-                        setSelectedChannels(
-                          selectedChannels.filter((c) => c !== channel.index)
-                        );
-                      } else {
-                        setSelectedChannels([
-                          ...selectedChannels,
-                          channel.index
-                        ]);
-                      }
-                    }}
-                  />
-                ))}
-              </div>
-              <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
-            </div>
-
-            <div className="px-4 py-4 sm:px-6">
-              <Input
-                label="Sharable URL"
-                value={QRCodeURL}
-                disabled
-                action={{
-                  icon: <ClipboardIcon className="h-4" />,
-                  action() {
-                    void navigator.clipboard.writeText(QRCodeURL);
-                    toast.success("Copied URL to Clipboard");
-                  }
-                }}
-              />
-            </div>
-
-            {/* </Card> */}
-          </div>
-        </Dialog.Panel>
-      </div>
-    </Dialog>
-  );
-};

src/components/Dialog/QRDialog.tsx

@@ -6,10 +6,9 @@ import { toast } from "react-hot-toast";
 import { QRCode } from "react-qrcode-logo";
 
 import { Checkbox } from "@components/form/Checkbox.js";
-import { IconButton } from "@components/form/IconButton.js";
 import { Input } from "@components/form/Input.js";
-import { Dialog } from "@headlessui/react";
-import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Dialog } from "@components/generic/Dialog.js";
+import { ClipboardIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface QRDialogProps {
@@ -48,79 +47,57 @@ export const QRDialog = ({
   }, [channels, selectedChannels, loraConfig]);
 
   return (
-    <Dialog open={isOpen} onClose={close}>
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel>
-          <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
-            <div className="flex px-4 py-5 sm:px-6">
-              <div>
-                <h1 className="text-lg font-bold">Generate QR Code</h1>
-                <h5 className="text-sm text-slate-600">
-                  The current LoRa configuration will also be shared.
-                </h5>
-              </div>
-              <IconButton
-                onClick={close}
-                className="my-auto ml-auto"
-                size="sm"
-                variant="secondary"
-                icon={<XMarkIcon className="h-4" />}
-              />
-            </div>
-            <div className="flex gap-3 px-4 py-5 sm:p-6">
-              <div className="flex w-40 flex-col gap-1">
-                {channels.map((channel) => (
-                  <Checkbox
-                    key={channel.index}
-                    disabled={
-                      channel.index === 0 ||
-                      channel.role === Protobuf.Channel_Role.DISABLED
-                    }
-                    label={
-                      channel.settings?.name.length
-                        ? channel.settings.name
-                        : channel.role === Protobuf.Channel_Role.PRIMARY
-                        ? "Primary"
-                        : `Channel: ${channel.index}`
-                    }
-                    checked={selectedChannels.includes(channel.index)}
-                    onChange={() => {
-                      if (selectedChannels.includes(channel.index)) {
-                        setSelectedChannels(
-                          selectedChannels.filter((c) => c !== channel.index)
-                        );
-                      } else {
-                        setSelectedChannels([
-                          ...selectedChannels,
-                          channel.index
-                        ]);
-                      }
-                    }}
-                  />
-                ))}
-              </div>
-              <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
-            </div>
+    <Dialog
+      title={"Generate QR Code"}
+      description={"The current LoRa configuration will also be shared."}
+      isOpen={isOpen}
+      close={close}
+    >
+      <div className="flex gap-3 px-4 py-5 sm:p-6">
+        <div className="flex w-40 flex-col gap-1">
+          {channels.map((channel) => (
+            <Checkbox
+              key={channel.index}
+              disabled={
+                channel.index === 0 ||
+                channel.role === Protobuf.Channel_Role.DISABLED
+              }
+              label={
+                channel.settings?.name.length
+                  ? channel.settings.name
+                  : channel.role === Protobuf.Channel_Role.PRIMARY
+                  ? "Primary"
+                  : `Channel: ${channel.index}`
+              }
+              checked={selectedChannels.includes(channel.index)}
+              onChange={() => {
+                if (selectedChannels.includes(channel.index)) {
+                  setSelectedChannels(
+                    selectedChannels.filter((c) => c !== channel.index)
+                  );
+                } else {
+                  setSelectedChannels([...selectedChannels, channel.index]);
+                }
+              }}
+            />
+          ))}
+        </div>
+        <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
+      </div>
 
-            <div className="px-4 py-4 sm:px-6">
-              <Input
-                label="Sharable URL"
-                value={QRCodeURL}
-                disabled
-                action={{
-                  icon: <ClipboardIcon className="h-4" />,
-                  action() {
-                    void navigator.clipboard.writeText(QRCodeURL);
-                    toast.success("Copied URL to Clipboard");
-                  }
-                }}
-              />
-            </div>
-
-            {/* </Card> */}
-          </div>
-        </Dialog.Panel>
+      <div className="sm:px-6">
+        <Input
+          label="Sharable URL"
+          value={QRCodeURL}
+          disabled
+          action={{
+            icon: <ClipboardIcon className="h-4" />,
+            action() {
+              void navigator.clipboard.writeText(QRCodeURL);
+              toast.success("Copied URL to Clipboard");
+            }
+          }}
+        />
       </div>
     </Dialog>
   );

src/components/Dialog/RebootDialog.tsx

@@ -0,0 +1,68 @@
+import type React from "react";
+import { useState } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { Dialog } from "@components/generic/Dialog.js";
+import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "../form/Button.js";
+import { Input } from "../form/Input.js";
+
+export interface RebootDialogProps {
+  isOpen: boolean;
+  close: () => void;
+}
+
+export const RebootDialog = ({
+  isOpen,
+  close
+}: RebootDialogProps): JSX.Element => {
+  const { connection, setRebootDialogOpen } = useDevice();
+
+  const [time, setTime] = useState<number>(5);
+
+  return (
+    <Dialog
+      title={"Schedule Reboot"}
+      description={"Reboot the connected node after x minutes."}
+      isOpen={isOpen}
+      close={close}
+    >
+      <div className="flex gap-2 p-4">
+        <Input
+          type="number"
+          value={time}
+          onChange={(e) => setTime(parseInt(e.target.value))}
+          action={{
+            icon: <ClockIcon className="w-4" />,
+            action() {
+              connection?.reboot({
+                time: time * 60,
+                callback: async () => {
+                  setRebootDialogOpen(false);
+                  await Promise.resolve();
+                }
+              });
+            }
+          }}
+        />
+        <Button
+          className="w-24"
+          variant="secondary"
+          iconAfter={<ArrowPathIcon className="w-4" />}
+          onClick={() => {
+            connection?.reboot({
+              time: 0,
+              callback: async () => {
+                setRebootDialogOpen(false);
+                await Promise.resolve();
+              }
+            });
+          }}
+        >
+          Now
+        </Button>
+      </div>
+    </Dialog>
+  );
+};

src/components/Dialog/ShutdownDialog.tsx

@@ -0,0 +1,68 @@
+import type React from "react";
+import { useState } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { Dialog } from "@components/generic/Dialog.js";
+import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "../form/Button.js";
+import { Input } from "../form/Input.js";
+
+export interface ShutdownDialogProps {
+  isOpen: boolean;
+  close: () => void;
+}
+
+export const ShutdownDialog = ({
+  isOpen,
+  close
+}: ShutdownDialogProps): JSX.Element => {
+  const { connection, setShutdownDialogOpen } = useDevice();
+
+  const [time, setTime] = useState<number>(5);
+
+  return (
+    <Dialog
+      title={"Schedule Shutdown"}
+      description={"Turn off the connected node after x minutes."}
+      isOpen={isOpen}
+      close={close}
+    >
+      <div className="flex gap-2 p-4">
+        <Input
+          type="number"
+          value={time}
+          onChange={(e) => setTime(parseInt(e.target.value))}
+          action={{
+            icon: <ClockIcon className="w-4" />,
+            action() {
+              connection?.shutdown({
+                time: time * 60,
+                callback: async () => {
+                  setShutdownDialogOpen(false);
+                  await Promise.resolve();
+                }
+              });
+            }
+          }}
+        />
+        <Button
+          className="w-24"
+          variant="secondary"
+          iconAfter={<PowerIcon className="w-4" />}
+          onClick={() => {
+            connection?.shutdown({
+              time: 0,
+              callback: async () => {
+                setShutdownDialogOpen(false);
+                await Promise.resolve();
+              }
+            });
+          }}
+        >
+          Now
+        </Button>
+      </div>
+    </Dialog>
+  );
+};