add new dialogs & cleanup

package.json

@@ -27,12 +27,12 @@
     "@heroicons/react": "^2.0.13",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^2.9.10",
-    "@meshtastic/meshtasticjs": "^0.7.2",
+    "@meshtastic/meshtasticjs": "^0.7.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "base64-js": "^1.5.1",
     "chart.js": "^4.0.1",
-    "chartjs-adapter-date-fns": "^2.0.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "date-fns": "^2.29.3",
@@ -56,9 +56,9 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "^0.0.204",
     "@types/geodesy": "^2.2.3",
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.11.13",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/w3c-web-serial": "^1.0.3",

pnpm-lock.yaml

@@ -6,13 +6,13 @@ specifiers:
   '@heroicons/react': ^2.0.13
   '@hookform/error-message': ^2.0.1
   '@hookform/resolvers': ^2.9.10
-  '@meshtastic/meshtasticjs': ^0.7.2
+  '@meshtastic/meshtasticjs': ^0.7.3
   '@tailwindcss/forms': ^0.5.3
   '@tailwindcss/line-clamp': ^0.4.2
   '@tailwindcss/typography': ^0.5.8
-  '@types/chrome': ^0.0.203
+  '@types/chrome': ^0.0.204
   '@types/geodesy': ^2.2.3
-  '@types/node': ^18.11.12
+  '@types/node': ^18.11.13
   '@types/react': ^18.0.26
   '@types/react-dom': ^18.0.9
   '@types/w3c-web-serial': ^1.0.3
@@ -23,7 +23,7 @@ specifiers:
   autoprefixer: ^10.4.13
   base64-js: ^1.5.1
   chart.js: ^4.0.1
-  chartjs-adapter-date-fns: ^2.0.1
+  chartjs-adapter-date-fns: ^3.0.0
   class-transformer: ^0.5.1
   class-validator: ^0.14.0
   date-fns: ^2.29.3
@@ -69,12 +69,12 @@ dependencies:
   '@heroicons/react': 2.0[email protected]
   '@hookform/error-message': 2.0.1_nrnvpvixg5xdweezd67llqjwze
   '@hookform/resolvers': 2.9[email protected]
-  '@meshtastic/meshtasticjs': 0.7.2
+  '@meshtastic/meshtasticjs': 0.7.3
   '@tailwindcss/line-clamp': 0.4[email protected]
   '@tailwindcss/typography': 0.5[email protected]
   base64-js: 1.5.1
   chart.js: 4.0.1
-  chartjs-adapter-date-fns: 2.0[email protected]
+  chartjs-adapter-date-fns: 3.0.0_thp3sedjxvmiqxrdsmekdnimom
   class-transformer: 0.5.1
   class-validator: 0.14.0
   date-fns: 2.29.3
@@ -98,9 +98,9 @@ dependencies:
 
 devDependencies:
   '@tailwindcss/forms': 0.5[email protected]
-  '@types/chrome': 0.0.203
+  '@types/chrome': 0.0.204
   '@types/geodesy': 2.2.3
-  '@types/node': 18.11.12
+  '@types/node': 18.11.13
   '@types/react': 18.0.26
   '@types/react-dom': 18.0.9
   '@types/w3c-web-serial': 1.0.3
@@ -125,7 +125,7 @@ devDependencies:
   tslib: 2.4.1
   typescript: 4.9.4
   unimported: 1.23.0
-  vite: 4.0.0_@[email protected]2
+  vite: 4.0.0_@[email protected]3
   vite-plugin-environment: 1.1[email protected]
 
 packages:
@@ -785,8 +785,8 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@meshtastic/meshtasticjs/0.7.2:
+  /@meshtastic/meshtasticjs/0.7.3:
-    resolution: {integrity: sha512-RJCJLtlGUn7To+I4MnxuSDxwWK/MgAAfbfq+Naib6fve2VQEBu2CPF2Iy0A+wAHxR1ygOKcS8VbyS2D1FAQhcw==}
+    resolution: {integrity: sha512-9NvWvTQSqCRNhYrE7FnhW9/bVSmnZ9LYGy04P+8IwhQzlYduhnaIb5vDKgLSURl5YhpnHlWOQFJVXs8tuZv2CQ==}
     dependencies:
       '@protobuf-ts/runtime': 2.8.2
       glob: 8.0.3
@@ -887,8 +887,8 @@ packages:
     resolution: {integrity: sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg==}
     dev: false
 
-  /@types/chrome/0.0.203:
+  /@types/chrome/0.0.204:
-    resolution: {integrity: sha512-JlQNebwpBETVc8U1Rr2inDFuOTtn0lahRAhnddx1dd0S5RrLAFJEEsyIu7AXI14mkCgSunksnuLGioH8kvBqRA==}
+    resolution: {integrity: sha512-EvnHfxMHUWP5EAlRMK66uIEUiy36t72vg5RwmzQv9tdIl2ZmAp92NwvmEZJKpbRnIMTEc2BmSmtrFiEISUJ0Sw==}
     dependencies:
       '@types/filesystem': 0.0.32
       '@types/har-format': 1.2.10
@@ -946,8 +946,8 @@ packages:
       '@types/pbf': 3.0.2
     dev: false
 
-  /@types/node/18.11.12:
+  /@types/node/18.11.13:
-    resolution: {integrity: sha512-FgD3NtTAKvyMmD44T07zz2fEf+OKwutgBCEVM8GcvMGVGaDktiLNTDvPwC/LUe3PinMW+X6CuLOF2Ui1mAlSXg==}
+    resolution: {integrity: sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==}
     dev: true
 
   /@types/normalize-package-data/2.4.1:
@@ -1153,7 +1153,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.19.6_@[email protected]
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.0.0_@[email protected]2
+      vite: 4.0.0_@[email protected]3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1435,12 +1435,14 @@ packages:
     engines: {pnpm: ^7.0.0}
     dev: false
 
-  /chartjs-adapter-date-fns/[email protected]:
+  /chartjs-adapter-date-fns/3.0.0_thp3sedjxvmiqxrdsmekdnimom:
-    resolution: {integrity: sha512-v3WV9rdnQ05ce3A0ZCjzUekJCAbfm6+3HqSoeY2BIkdMYZoYr/4T+ril1tZyDl869lz6xdNVMXejUFT9YKpw4A==}
+    resolution: {integrity: sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==}
     peerDependencies:
       chart.js: '>=2.8.0'
+      date-fns: '>=2.0.0'
     dependencies:
       chart.js: 4.0.1
+      date-fns: 2.29.3
     dev: false
 
   /chokidar/3.5.3:
@@ -3758,8 +3760,8 @@ packages:
       yargs: 17.6.2
     dev: true
 
-  /rollup/3.7.1:
+  /rollup/3.7.2:
-    resolution: {integrity: sha512-ek6+FORvI79VQTNlIYtXpIrGEPRlYSNZO+5EcmaozKkRL5L6KLvGDUbM5E+bd6jnHW9fgcK0DKTdWjIsEmNb4g==}
+    resolution: {integrity: sha512-orqIX5zkHyHKVsIBl8J5a2tnVikOAMte0DgOLViyW6McYuj45FG+cQPrXILhaifBSmy0D0hKbHg2RbgzFJcwTg==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -4288,10 +4290,10 @@ packages:
     peerDependencies:
       vite: '>= 2.7'
     dependencies:
-      vite: 4.0.0_@[email protected]2
+      vite: 4.0.0_@[email protected]3
     dev: true
 
-  /vite/4.0.0_@[email protected]2:
+  /vite/4.0.0_@[email protected]3:
     resolution: {integrity: sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -4316,11 +4318,11 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.11.12
+      '@types/node': 18.11.13
       esbuild: 0.16.4
       postcss: 8.4.19
       resolve: 1.22.1
-      rollup: 3.7.1
+      rollup: 3.7.2
     optionalDependencies:
       fsevents: 2.3.2
     dev: true

src/components/CommandPalette/Index.tsx

@@ -40,6 +40,7 @@ import {
   MapIcon,
   MoonIcon,
   PlusIcon,
+  PowerIcon,
   QrCodeIcon,
   Square3Stack3DIcon,
   TrashIcon,
@@ -61,9 +62,16 @@ export interface Command {
 
 export const CommandPalette = (): JSX.Element => {
   const [query, setQuery] = useState("");
-  const [open, setOpen] = useState(false);
+  const { commandPaletteOpen, setCommandPaletteOpen } = useAppStore();
+  // const [open, setOpen] = useState(false);
 
-  const { setQRDialogOpen, setActivePage, connection } = useDevice();
+  const {
+    setQRDialogOpen,
+    setShutdownDialogOpen,
+    setRebootDialogOpen,
+    setActivePage,
+    connection
+  } = useDevice();
   const { setSelectedDevice, removeDevice, selectedDevice } = useAppStore();
 
   const groups: Group[] = [
@@ -181,6 +189,20 @@ export const CommandPalette = (): JSX.Element => {
             setSelectedDevice(0);
             removeDevice(selectedDevice ?? 0);
           }
+        },
+        {
+          name: "Schedule Shutdown",
+          icon: PowerIcon,
+          action() {
+            setShutdownDialogOpen(true);
+          }
+        },
+        {
+          name: "Schedule Reboot",
+          icon: ArrowPathIcon,
+          action() {
+            setRebootDialogOpen(true);
+          }
         }
       ]
     },
@@ -222,7 +244,7 @@ export const CommandPalette = (): JSX.Element => {
   const handleKeydown = (e: KeyboardEvent) => {
     if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
-      setOpen(true);
+      setCommandPaletteOpen(true);
     }
   };
 
@@ -249,12 +271,16 @@ export const CommandPalette = (): JSX.Element => {
 
   return (
     <Transition.Root
-      show={open}
+      show={commandPaletteOpen}
       as={Fragment}
       afterLeave={() => setQuery("")}
       appear
     >
-      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setCommandPaletteOpen}
+      >
         <PaletteTransition>
           <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white  shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
             <Combobox<Command | string>
@@ -262,7 +288,7 @@ export const CommandPalette = (): JSX.Element => {
                 if (typeof input === "string") {
                   setQuery(input);
                 } else if (input.action) {
-                  setOpen(false);
+                  setCommandPaletteOpen(false);
                   input.action();
                 }
               }}

src/components/DeviceSelector.tsx

@@ -4,7 +4,7 @@ import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDeviceStore } from "@app/core/stores/deviceStore.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { CommandLineIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
@@ -43,14 +43,7 @@ export const DeviceSelector = (): JSX.Element => {
           <PlusIcon />
         </div>
       </span>
-      <img src="Logo_Black.svg" className="mt-auto px-3" />
+      <img src="Logo_Black.svg" className="mt-auto px-3 py-4" />
-      <div className="my-4 flex flex-col gap-2 [writing-mode:horizontal-tb]">
-        <CommandLineIcon className="h-6 text-slate-400" />
-        <Mono className="text-xs">
-          <kbd className="rounded-md bg-slate-200 p-0.5 pr-1 italic">Ctrl</kbd>+
-          <kbd className="rounded-md bg-slate-200 p-0.5 pr-1 italic">K</kbd>
-        </Mono>
-      </div>
     </div>
   );
 };

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 { Dialog } from "@components/generic/Dialog.js";
-import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
+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}>
+    <Dialog
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      title={"Generate QR Code"}
-      <div className="fixed inset-0 flex items-center justify-center p-4">
+      description={"The current LoRa configuration will also be shared."}
-        <Dialog.Panel>
+      isOpen={isOpen}
-          <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
+      close={close}
-            <div className="flex px-4 py-5 sm:px-6">
+    >
-              <div>
+      <div className="flex gap-3 px-4 py-5 sm:p-6">
-                <h1 className="text-lg font-bold">Generate QR Code</h1>
+        <div className="flex w-40 flex-col gap-1">
-                <h5 className="text-sm text-slate-600">
+          {channels.map((channel) => (
-                  The current LoRa configuration will also be shared.
+            <Checkbox
-                </h5>
+              key={channel.index}
-              </div>
+              disabled={
-              <IconButton
+                channel.index === 0 ||
-                onClick={close}
+                channel.role === Protobuf.Channel_Role.DISABLED
-                className="my-auto ml-auto"
+              }
-                size="sm"
+              label={
-                variant="secondary"
+                channel.settings?.name.length
-                icon={<XMarkIcon className="h-4" />}
+                  ? channel.settings.name
-              />
+                  : channel.role === Protobuf.Channel_Role.PRIMARY
-            </div>
+                  ? "Primary"
-            <div className="flex gap-3 px-4 py-5 sm:p-6">
+                  : `Channel: ${channel.index}`
-              <div className="flex w-40 flex-col gap-1">
+              }
-                {channels.map((channel) => (
+              checked={selectedChannels.includes(channel.index)}
-                  <Checkbox
+              onChange={() => {
-                    key={channel.index}
+                if (selectedChannels.includes(channel.index)) {
-                    disabled={
+                  setSelectedChannels(
-                      channel.index === 0 ||
+                    selectedChannels.filter((c) => c !== channel.index)
-                      channel.role === Protobuf.Channel_Role.DISABLED
+                  );
-                    }
+                } else {
-                    label={
+                  setSelectedChannels([...selectedChannels, channel.index]);
-                      channel.settings?.name.length
+                }
-                        ? channel.settings.name
+              }}
-                        : channel.role === Protobuf.Channel_Role.PRIMARY
+            />
-                        ? "Primary"
+          ))}
-                        : `Channel: ${channel.index}`
+        </div>
-                    }
+        <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
-                    checked={selectedChannels.includes(channel.index)}
+      </div>
-                    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 className="sm:px-6">
-          </div>
+        <Input
-        </Dialog.Panel>
+          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>
+  );
+};

src/components/PageComponents/Map/MapControlls.tsx

@@ -10,8 +10,8 @@ export const MapControlls = (): JSX.Element => {
   const { current: map } = useMap();
 
   return (
-    <div className="absolute right-0 top-0 z-10 m-2">
+    <div className="absolute right-0 top-0 z-10 m-2 ">
-      <div className="divide-y overflow-hidden rounded-md bg-white">
+      <div className="divide-y divide-orange-300 overflow-hidden rounded-md bg-white shadow-md">
         <div
           className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
           onClick={() => {

src/components/Sidebar.tsx

@@ -8,12 +8,16 @@ import { PeersWidget } from "@components/Widgets/PeersWidget.js";
 import { PositionWidget } from "@components/Widgets/PositionWidget.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { CommandLineIcon } from "@heroicons/react/24/outline";
 import { Types } from "@meshtastic/meshtasticjs";
 
+import { Input } from "./form/Input.js";
+
 export const Sidebar = (): JSX.Element => {
   const { removeDevice } = useDeviceStore();
   const { connection, hardware, nodes, status, currentMetrics } = useDevice();
-  const { selectedDevice, setSelectedDevice } = useAppStore();
+  const { selectedDevice, setSelectedDevice, setCommandPaletteOpen } =
+    useAppStore();
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
   return (
@@ -35,7 +39,7 @@ export const Sidebar = (): JSX.Element => {
         }}
       />
 
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-grow flex-col gap-3">
         <BatteryWidget
           batteryLevel={currentMetrics.batteryLevel}
           voltage={currentMetrics.voltage}
@@ -51,6 +55,18 @@ export const Sidebar = (): JSX.Element => {
             myNode?.data.position?.longitudeI
           )}
         />
+        <div className="mt-auto">
+          <Input
+            placeholder={"Search for a command"}
+            onClick={() => setCommandPaletteOpen(true)}
+            action={{
+              icon: <CommandLineIcon className="w-4" />,
+              action() {
+                setCommandPaletteOpen(true);
+              }
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/form/Button.tsx

@@ -15,6 +15,7 @@ export const Button = ({
   iconAfter,
   children,
   disabled,
+  className,
   ...rest
 }: ButtonProps): JSX.Element => {
   return (
@@ -22,7 +23,7 @@ export const Button = ({
       className={`flex w-full rounded-md border border-transparent px-3 focus:outline-none focus:ring-2 focus:ring-orange-500  ${
         variant === "primary"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
-          : "bg-orange-200 text-orange-700 hover:bg-orange-200"
+          : "bg-orange-200 text-orange-700 hover:bg-orange-300"
       } ${
         size === "sm"
           ? "h-8 text-sm"
@@ -33,7 +34,7 @@ export const Button = ({
         disabled
           ? "cursor-not-allowed bg-gray-400 hover:bg-gray-400 focus:ring-gray-500"
           : ""
-      }`}
+      } ${className}`}
       disabled={disabled}
       {...rest}
     >

src/components/form/IconButton.tsx

@@ -21,7 +21,7 @@ export const IconButton = ({
       className={`flex rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
         variant === "primary"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
-          : "bg-orange-100 text-orange-700 hover:bg-orange-200"
+          : "bg-orange-200 text-orange-700 hover:bg-orange-300"
       } ${
         size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
       } ${disabled ? "cursor-not-allowed bg-red-400 focus:ring-red-500" : ""} ${

src/components/form/Input.tsx

@@ -56,7 +56,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           <button
             type="button"
             onClick={action.action}
-            className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium hover:bg-orange-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
+            className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium text-orange-700 hover:bg-orange-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
           >
             {action.icon}
           </button>

src/components/generic/Dialog.tsx

@@ -0,0 +1,48 @@
+import type React from "react";
+
+import { IconButton } from "@components/form/IconButton.js";
+import { Dialog as DialogUI } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+export interface DialogProps {
+  title: string;
+  description: string;
+  isOpen: boolean;
+  close: () => void;
+  children: React.ReactNode;
+}
+
+export const Dialog = ({
+  title,
+  description,
+  isOpen,
+  close,
+  children
+}: DialogProps): JSX.Element => {
+  return (
+    <DialogUI 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">
+        <DialogUI.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">{title}</h1>
+                <h5 className="text-sm text-slate-600">{description}</h5>
+              </div>
+              <IconButton
+                onClick={close}
+                className="my-auto ml-auto"
+                size="sm"
+                variant="secondary"
+                icon={<XMarkIcon className="h-4" />}
+              />
+            </div>
+
+            <div className="p-4">{children}</div>
+          </div>
+        </DialogUI.Panel>
+      </div>
+    </DialogUI>
+  );
+};

src/core/stores/appStore.ts

@@ -15,6 +15,7 @@ interface AppState {
     num: number;
   }[];
   rasterSources: RasterSource[];
+  commandPaletteOpen: boolean;
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -23,6 +24,7 @@ interface AppState {
   setSelectedDevice: (deviceId: number) => void;
   addDevice: (device: { id: number; num: number }) => void;
   removeDevice: (deviceId: number) => void;
+  setCommandPaletteOpen: (open: boolean) => void;
 }
 
 export const useAppStore = create<AppState>()((set) => ({
@@ -30,6 +32,7 @@ export const useAppStore = create<AppState>()((set) => ({
   devices: [],
   currentPage: "messages",
   rasterSources: [],
+  commandPaletteOpen: false,
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -52,7 +55,6 @@ export const useAppStore = create<AppState>()((set) => ({
       })
     );
   },
-
   setSelectedDevice: (deviceId) =>
     set(() => ({
       selectedDevice: deviceId
@@ -64,5 +66,12 @@ export const useAppStore = create<AppState>()((set) => ({
   removeDevice: (deviceId) =>
     set((state) => ({
       devices: state.devices.filter((device) => device.id !== deviceId)
-    }))
+    })),
+  setCommandPaletteOpen: (open: boolean) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.commandPaletteOpen = open;
+      })
+    );
+  }
 }));

src/core/stores/deviceStore.ts

@@ -56,6 +56,8 @@ export interface Device {
   regionUnset: boolean;
   currentMetrics: Protobuf.DeviceMetrics;
   QRDialogOpen: boolean;
+  shutdownDialogOpen: boolean;
+  rebootDialogOpen: boolean;
   pendingSettingsChanges: boolean;
 
   setReady(ready: boolean): void;
@@ -79,6 +81,8 @@ export interface Device {
   addDeviceMetadataMessage: (metadata: Types.DeviceMetadataPacket) => void;
   ackMessage: (channelIndex: number, messageId: number) => void;
   setQRDialogOpen: (open: boolean) => void;
+  setShutdownDialogOpen: (open: boolean) => void;
+  setRebootDialogOpen: (open: boolean) => void;
 }
 
 export interface DeviceState {
@@ -115,6 +119,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           regionUnset: false,
           currentMetrics: Protobuf.DeviceMetrics.create(),
           QRDialogOpen: false,
+          shutdownDialogOpen: false,
+          rebootDialogOpen: false,
           pendingSettingsChanges: false,
 
           setReady: (ready: boolean) => {
@@ -539,6 +545,26 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 }
               })
             );
+          },
+          setShutdownDialogOpen: (open: boolean) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.shutdownDialogOpen = open;
+                }
+              })
+            );
+          },
+          setRebootDialogOpen: (open: boolean) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.rebootDialogOpen = open;
+                }
+              })
+            );
           }
         });
       })

src/core/subscriptions.ts

@@ -45,24 +45,19 @@ export const subscribeAll = (
   });
 
   connection.onMyNodeInfo.subscribe((nodeInfo) => {
-    console.log("^^^^^^^ GOT MY NODE INFO");
-
     device.setHardware(nodeInfo);
     myNodeNum = nodeInfo.myNodeNum;
   });
 
   connection.onUserPacket.subscribe((user) => {
-    console.log("^^^^^^^ GOT USER");
     device.addUser(user);
   });
 
   connection.onPositionPacket.subscribe((position) => {
-    console.log("^^^^^^^ GOT POSITION");
     device.addPosition(position);
   });
 
   connection.onNodeInfoPacket.subscribe((nodeInfo) => {
-    console.log("^^^^^^^ GOT NODE INFO");
     toast(`New Node Discovered: ${nodeInfo.data.user?.shortName ?? "UNK"}`, {
       icon: "🔎"
     });

src/validation/config/network.ts

@@ -21,6 +21,7 @@ export class NetworkValidation implements Protobuf.Config_NetworkConfig {
   ethEnabled: boolean;
 
   @IsEnum(Protobuf.Config_NetworkConfig_EthMode)
+  @IsOptional()
   ethMode: Protobuf.Config_NetworkConfig_EthMode;
 
   ipv4Config: NetworkValidation_IpV4Config;