fix import paths, remove old form elements

src/components/Dialog/DeviceNameDialog.tsx

@@ -11,7 +11,7 @@ import { Button } from "@components/UI/Button.js";
 import { useDevice } from "@app/core/stores/deviceStore.js";
 import { useForm } from "react-hook-form";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Label } from "../UI/Label.js";
+import { Label } from "@components/UI/Label.js";
 
 export interface User {
   longName: string;
@@ -27,7 +27,7 @@ export const DeviceNameDialog = ({
   open,
   onOpenChange
 }: DeviceNameDialogProps): JSX.Element => {
-  const { hardware, nodes, connection, setDialogOpen } = useDevice();
+  const { hardware, nodes, connection } = useDevice();
 
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
@@ -45,7 +45,7 @@ export const DeviceNameDialog = ({
         ...data
       })
     );
-    setDialogOpen("deviceName", false);
+    onOpenChange(false);
   });
 
   return (

src/components/Dialog/ImportDialog.tsx

@@ -1,7 +1,7 @@
 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 { Checkbox } from "@components/UI/Checkbox.js";
+import { Input } from "@components/UI/Input.js";
 import {
   Dialog,
   DialogContent,
@@ -11,9 +11,10 @@ import {
   DialogTitle
 } from "@components/UI/Dialog.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Toggle } from "@components/form/Toggle.js";
+import { Switch } from "@components/UI/Switch.js";
 import { Button } from "@components/UI/Button.js";
 import { useDevice } from "@core/stores/deviceStore.js";
+import { Label } from "@components/UI/Label.js";
 
 export interface ImportDialogProps {
   open: boolean;
@@ -82,8 +83,8 @@ export const ImportDialog = ({
           </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-3">
+          <Label>Channel Set/QR Code URL</Label>
           <Input
-            label="Channel Set/QR Code URL"
             value={QRCodeURL}
             suffix={validURL ? "✅" : "❌"}
             onChange={(e) => {
@@ -94,8 +95,8 @@ export const ImportDialog = ({
             <div className="flex flex-col gap-3">
               <div className="flex w-full gap-2">
                 <div className="w-36">
-                  <Toggle
-                    label="Use Preset?"
+                  <Label>Use Preset?</Label>
+                  <Switch
                     disabled
                     checked={channelSet?.loraConfig?.usePreset ?? true}
                   />
@@ -121,14 +122,14 @@ export const ImportDialog = ({
               </span>
               <div className="flex w-40 flex-col gap-1">
                 {channelSet?.settings.map((channel, index) => (
-                  <Checkbox
-                    key={index}
-                    label={
-                      channel.name.length
+                  <>
+                    <Label>
+                      {channel.name.length
                         ? channel.name
-                        : `Channel: ${channel.id}`
-                    }
-                  />
+                        : `Channel: ${channel.id}`}
+                    </Label>
+                    <Checkbox key={index} />
+                  </>
                 ))}
               </div>
             </div>

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,4 +1,3 @@
-import { Input } from "@components/form/Input.js";
 import {
   Dialog,
   DialogContent,
@@ -6,9 +5,14 @@ import {
   DialogHeader,
   DialogTitle
 } from "@components/UI/Dialog.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../UI/Tabs.js";
-import { Subtle } from "../UI/Typography/Subtle.js";
-import { Link } from "../UI/Typography/Link.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@components/UI/Tabs.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { Link } from "@components/UI/Typography/Link.js";
 import { HTTP } from "../PageComponents/Connect/HTTP.js";
 import { BLE } from "../PageComponents/Connect/BLE.js";
 import { Serial } from "../PageComponents/Connect/Serial.js";

src/components/Dialog/QRDialog.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { fromByteArray } from "base64-js";
 import { QRCode } from "react-qrcode-logo";
-import { Checkbox } from "@components/form/Checkbox.js";
-import { Input } from "@components/form/Input.js";
+import { Checkbox } from "@components/UI/Checkbox.js";
+import { Input } from "@components/UI/Input.js";
 import {
   Dialog,
   DialogContent,
@@ -13,6 +13,7 @@ import {
 } from "@components/UI/Dialog.js";
 import { ClipboardIcon } from "lucide-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Label } from "@components/UI/Label.js";
 
 export interface QRDialogProps {
   open: boolean;
@@ -62,39 +63,44 @@ export const QRDialog = ({
           <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}
-                  label={
-                    channel.settings?.name.length
+                <>
+                  <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]);
-                    }
-                  }}
-                />
+                      : `Channel: ${channel.index}`}
+                  </Label>
+                  <Checkbox
+                    key={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>
         <DialogFooter>
+          <Label>Sharable URL</Label>
           <Input
-            label="Sharable URL"
             value={QRCodeURL}
             disabled
             action={{
-              icon: <ClipboardIcon size={16} />,
-              action() {
+              icon: ClipboardIcon,
+              onClick() {
                 void navigator.clipboard.writeText(QRCodeURL);
               }
             }}

src/components/Dialog/RebootDialog.tsx

@@ -10,7 +10,7 @@ import {
 } from "@components/UI/Dialog.js";
 import { ClockIcon, RefreshCwIcon } from "lucide-react";
 import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/form/Input.js";
+import { Input } from "@components/UI/Input.js";
 
 export interface RebootDialogProps {
   open: boolean;
@@ -21,7 +21,7 @@ export const RebootDialog = ({
   open,
   onOpenChange
 }: RebootDialogProps): JSX.Element => {
-  const { connection, setDialogOpen } = useDevice();
+  const { connection } = useDevice();
 
   const [time, setTime] = useState<number>(5);
 
@@ -40,21 +40,19 @@ export const RebootDialog = ({
             value={time}
             onChange={(e) => setTime(parseInt(e.target.value))}
             action={{
-              icon: <ClockIcon size={16} />,
-              action() {
-                connection
-                  ?.reboot(time * 60)
-                  .then(() => setDialogOpen("reboot", false));
+              icon: ClockIcon,
+              onClick() {
+                connection?.reboot(time * 60).then(() => onOpenChange(false));
               }
             }}
           />
           <Button
             className="w-24"
             onClick={() => {
-              connection?.reboot(2).then(() => setDialogOpen("reboot", false));
+              connection?.reboot(2).then(() => onOpenChange(false));
             }}
           >
-            <RefreshCwIcon size={16} />
+            <RefreshCwIcon className="mr-2" size={16} />
             Now
           </Button>
         </div>

src/components/Dialog/ShutdownDialog.tsx

@@ -9,7 +9,7 @@ import {
 } from "@components/UI/Dialog.js";
 import { ClockIcon, PowerIcon } from "lucide-react";
 import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/form/Input.js";
+import { Input } from "@components/UI/Input.js";
 
 export interface ShutdownDialogProps {
   open: boolean;
@@ -20,7 +20,7 @@ export const ShutdownDialog = ({
   open,
   onOpenChange
 }: ShutdownDialogProps): JSX.Element => {
-  const { connection, setDialogOpen } = useDevice();
+  const { connection } = useDevice();
 
   const [time, setTime] = useState<number>(5);
 
@@ -39,25 +39,24 @@ export const ShutdownDialog = ({
             type="number"
             value={time}
             onChange={(e) => setTime(parseInt(e.target.value))}
-            action={{
-              icon: <ClockIcon size={16} />,
-              action() {
-                connection
-                  ?.shutdown(time * 60)
-                  .then(() => setDialogOpen("shutdown", false));
-              }
-            }}
+            suffix="Minutes"
           />
           <Button
             className="w-24"
             onClick={() => {
-              connection
-                ?.shutdown(2)
-                .then(() => setDialogOpen("shutdown", false));
+              connection?.shutdown(time * 60).then(() => onOpenChange(false));
             }}
           >
-            <PowerIcon size={16} />
-            <span>Now</span>
+            <ClockIcon size={16} />
+          </Button>
+          <Button
+            className="w-24"
+            onClick={() => {
+              connection?.shutdown(2).then(() => () => onOpenChange(false));
+            }}
+          >
+            <PowerIcon className="mr-2" size={16} />
+            Now
           </Button>
         </div>
       </DialogContent>