chore: fixes from deno linting/formatting

2025-03-02 14:46:02 -05:00
parent db08542b39
commit 50eb2a827f
136 changed files with 1018 additions and 1082 deletions
@@ -1,15 +1,15 @@
 import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.tsx";
 import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
 import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
-import { PkiBackupDialog } from "@components/Dialog/PKIBackupDialog";
+import { PkiBackupDialog } from "./PKIBackupDialog.tsx";
 import { QRDialog } from "@components/Dialog/QRDialog.tsx";
 import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { JSX } from "react";
-import { NodeDetailsDialog } from "./NodeDetailsDialog";

-export const DialogManager = (): JSX.Element => {
+import { NodeDetailsDialog } from "./NodeDetailsDialog.tsx";
+
+export const DialogManager = () => {
  const { channels, config, dialog, setDialogOpen } = useDevice();
  return (
    <>
@@ -15,7 +15,7 @@ import { Switch } from "@components/UI/Switch.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
 import { toByteArray } from "base64-js";
-import { type JSX, useEffect, useState } from "react";
+import { useEffect, useState } from "react";

 export interface ImportDialogProps {
  open: boolean;
@@ -26,7 +26,7 @@ export interface ImportDialogProps {
 export const ImportDialog = ({
  open,
  onOpenChange,
-}: ImportDialogProps): JSX.Element => {
+}: ImportDialogProps) => {
  const [importDialogInput, setImportDialogInput] = useState<string>("");
  const [channelSet, setChannelSet] = useState<Protobuf.AppOnly.ChannelSet>();
  const [validUrl, setValidUrl] = useState<boolean>(false);
@@ -62,7 +62,7 @@ export const ImportDialog = ({
        ),
      );
      setValidUrl(true);
-    } catch (error) {
+    } catch (_error) {
      setValidUrl(false);
      setChannelSet(undefined);
    }
@@ -73,10 +73,9 @@ export const ImportDialog = ({
      connection?.setChannel(
        create(Protobuf.Channel.ChannelSchema, {
          index,
-          role:
-            index === 0
-              ? Protobuf.Channel.Channel_Role.PRIMARY
-              : Protobuf.Channel.Channel_Role.SECONDARY,
+          role: index === 0
+            ? Protobuf.Channel.Channel_Role.PRIMARY
+            : Protobuf.Channel.Channel_Role.SECONDARY,
          settings: ch,
        }),
      );
@@ -119,25 +118,29 @@ export const ImportDialog = ({
                <div className="w-36">
                  <Label>Use Preset?</Label>
                  <Switch
-                    disabled={true}
+                    disabled
                    checked={channelSet?.loraConfig?.usePreset ?? true}
                  />
                </div>
-                {/* <Select
+                {
+                  /* <Select
                  label="Modem Preset"
                  disabled
                  value={channelSet?.loraConfig?.modemPreset}
                >
                  {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-                </Select> */}
+                </Select> */
+                }
              </div>
-              {/* <Select
+              {
+                /* <Select
                label="Region"
                disabled
                value={channelSet?.loraConfig?.region}
              >
                {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-              </Select> */}
+              </Select> */
+              }

              <span className="text-md block font-medium text-text-primary">
                Channels:
@@ -1,14 +1,13 @@
-import { useDevice } from "@app/core/stores/deviceStore";
+import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
-} from "@components/UI/Dialog";
+} from "../UI/Dialog.tsx";
 import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import type { JSX } from "react";

 export interface LocationResponseDialogProps {
  location: Types.PacketMetadata<Protobuf.Mesh.location> | undefined;
@@ -20,15 +19,13 @@ export const LocationResponseDialog = ({
  location,
  open,
  onOpenChange,
-}: LocationResponseDialogProps): JSX.Element => {
+}: LocationResponseDialogProps) => {
  const { nodes } = useDevice();

  const from = nodes.get(location?.from ?? 0);
-  const longName =
-    from?.user?.longName ??
+  const longName = from?.user?.longName ??
    (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown");
-  const shortName =
-    from?.user?.shortName ??
+  const shortName = from?.user?.shortName ??
    (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK");

  return (
@@ -1,7 +1,7 @@
 import {
  type BrowserFeature,
  useBrowserFeatureDetection,
-} from "@app/core/hooks/useBrowserFeatureDetection";
+} from "../../core/hooks/useBrowserFeatureDetection.ts";
 import { BLE } from "@components/PageComponents/Connect/BLE.tsx";
 import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
 import { Serial } from "@components/PageComponents/Connect/Serial.tsx";
@@ -18,9 +18,9 @@ import {
  TabsTrigger,
 } from "@components/UI/Tabs.tsx";
 import { Subtle } from "@components/UI/Typography/Subtle.tsx";
-import { AlertCircle, InfoIcon } from "lucide-react";
-import { Fragment, type JSX } from "react/jsx-runtime";
-import { Link } from "../UI/Typography/Link";
+import { AlertCircle } from "lucide-react";
+import { Link } from "../UI/Typography/Link.tsx";
+import { Fragment } from "react/jsx-runtime";

 export interface TabElementProps {
  closeDialog: () => void;
@@ -85,14 +85,16 @@ const ErrorMessage = ({ missingFeatures }: FeatureErrorProps) => {
          <p className="text-sm">
            {browserFeatures.length > 0 && (
              <>
-                This application requires {formatFeatureList(browserFeatures)}.
-                Please use a Chromium-based browser like Chrome or Edge.
+                This application requires{" "}
+                {formatFeatureList(browserFeatures)}. Please use a
+                Chromium-based browser like Chrome or Edge.
              </>
            )}
            {needsSecureContext && (
              <>
                {browserFeatures.length > 0 && " Additionally, it"}
-                {browserFeatures.length === 0 && "This application"} requires a{" "}
+                {browserFeatures.length === 0 && "This application"} requires a
+                {" "}
                <Link href={links["Secure Context"]}>secure context</Link>.
                Please connect using HTTPS or localhost.
              </>
@@ -107,7 +109,7 @@ const ErrorMessage = ({ missingFeatures }: FeatureErrorProps) => {
 export const NewDeviceDialog = ({
  open,
  onOpenChange,
-}: NewDeviceProps): JSX.Element => {
+}: NewDeviceProps) => {
  const { unsupported } = useBrowserFeatureDetection();

  const tabs: TabManifest[] = [
@@ -119,15 +121,13 @@ export const NewDeviceDialog = ({
    {
      label: "Bluetooth",
      element: BLE,
-      isDisabled:
-        unsupported.includes("Web Bluetooth") ||
+      isDisabled: unsupported.includes("Web Bluetooth") ||
        unsupported.includes("Secure Context"),
    },
    {
      label: "Serial",
      element: Serial,
-      isDisabled:
-        unsupported.includes("Web Serial") ||
+      isDisabled: unsupported.includes("Web Serial") ||
        unsupported.includes("Secure Context"),
    },
  ];
@@ -149,9 +149,9 @@ export const NewDeviceDialog = ({
          {tabs.map((tab) => (
            <TabsContent key={tab.label} value={tab.label}>
              <fieldset disabled={tab.isDisabled}>
-                {tab.isDisabled ? (
-                  <ErrorMessage missingFeatures={unsupported} />
-                ) : null}
+                {tab.isDisabled
+                  ? <ErrorMessage missingFeatures={unsupported} />
+                  : null}
                <tab.element closeDialog={() => onOpenChange(false)} />
              </fieldset>
            </TabsContent>
@@ -1,23 +1,23 @@
-import { useAppStore } from "@app/core/stores/appStore";
-import { useDevice } from "@app/core/stores/deviceStore";
+import { useAppStore } from "../../core/stores/appStore.ts";
+import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
-} from "@components/UI/Accordion";
+} from "../UI/Accordion.tsx";
 import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
-} from "@components/UI/Dialog";
+} from "../UI/Dialog.tsx";
 import { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import { DeviceImage } from "../generic/DeviceImage";
-import { TimeAgo } from "../generic/TimeAgo";
-import { Uptime } from "../generic/Uptime";
+import { DeviceImage } from "../generic/DeviceImage.tsx";
+import { TimeAgo } from "../generic/TimeAgo.tsx";
+import { Uptime } from "../generic/Uptime.tsx";

 export interface NodeDetailsDialogProps {
  open: boolean;
@@ -32,134 +32,159 @@ export const NodeDetailsDialog = ({
  const { nodeNumDetails } = useAppStore();
  const device: Protobuf.Mesh.NodeInfo = nodes.get(nodeNumDetails);

-  return device ? (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            Node Details for {device.user?.longName ?? "UNKNOWN"} (
-            {device.user?.shortName ?? "UNK"})
-          </DialogTitle>
-        </DialogHeader>
-        <DialogFooter>
-          <div className="w-full">
-            <DeviceImage
-              className="w-32 h-32 mx-auto rounded-lg border-4 border-slate-200 dark:border-slate-800"
-              deviceType={
-                Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]
-              }
-            />
-            <div className="bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-              <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-                Details:
-              </p>
-              <p>
-                Hardware:{" "}
-                {Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]}
-              </p>
-              <p>Node Number: {device.num}</p>
-              <p>Node HEX: !{numberToHexUnpadded(device.num)}</p>
-              <p>
-                Role:{" "}
-                {
-                  Protobuf.Config.Config_DeviceConfig_Role[
+  return device
+    ? (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Node Details for {device.user?.longName ?? "UNKNOWN"} (
+              {device.user?.shortName ?? "UNK"})
+            </DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <div className="w-full">
+              <DeviceImage
+                className="w-32 h-32 mx-auto rounded-lg border-4 border-slate-200 dark:border-slate-800"
+                deviceType={Protobuf.Mesh
+                  .HardwareModel[device.user?.hwModel ?? 0]}
+              />
+              <div className="bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+                  Details:
+                </p>
+                <p>
+                  Hardware:{" "}
+                  {Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]}
+                </p>
+                <p>Node Number: {device.num}</p>
+                <p>Node HEX: !{numberToHexUnpadded(device.num)}</p>
+                <p>
+                  Role: {Protobuf.Config.Config_DeviceConfig_Role[
                    device.user?.role ?? 0
-                  ]
-                }
-              </p>
-              <p>
-                Last Heard:{" "}
-                {device.lastHeard === 0 ? (
-                  "Never"
-                ) : (
-                  <TimeAgo timestamp={device.lastHeard * 1000} />
-                )}
-              </p>
-            </div>
-
-            {device.position ? (
-              <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-                  Position:
+                  ]}
                </p>
-                {device.position.latitudeI && device.position.longitudeI ? (
-                  <p>
-                    Coordinates:{" "}
-                    <a
-                      className="text-blue-500 dark:text-blue-400"
-                      href={`https://www.openstreetmap.org/?mlat=${
-                        device.position.latitudeI / 1e7
-                      }&mlon=${device.position.longitudeI / 1e7}&layers=N`}
-                      target="_blank"
-                      rel="noreferrer"
+                <p>
+                  Last Heard: {device.lastHeard === 0
+                    ? (
+                      "Never"
+                    )
+                    : <TimeAgo timestamp={device.lastHeard * 1000} />}
+                </p>
+              </div>
+
+              {device.position
+                ? (
+                  <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                    <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+                      Position:
+                    </p>
+                    {device.position.latitudeI && device.position.longitudeI
+                      ? (
+                        <p>
+                          Coordinates:{" "}
+                          <a
+                            className="text-blue-500 dark:text-blue-400"
+                            href={`https://www.openstreetmap.org/?mlat=${
+                              device.position.latitudeI / 1e7
+                            }&mlon=${
+                              device.position.longitudeI / 1e7
+                            }&layers=N`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {device.position.latitudeI / 1e7},{" "}
+                            {device.position.longitudeI / 1e7}
+                          </a>
+                        </p>
+                      )
+                      : null}
+                    {device.position.altitude
+                      ? <p>Altitude: {device.position.altitude}m</p>
+                      : null}
+                  </div>
+                )
+                : null}
+
+              {device.deviceMetrics
+                ? (
+                  <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                    <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+                      Device Metrics:
+                    </p>
+                    {device.deviceMetrics.airUtilTx
+                      ? (
+                        <p>
+                          Air TX utilization:{" "}
+                          {device.deviceMetrics.airUtilTx.toFixed(2)}%
+                        </p>
+                      )
+                      : null}
+                    {device.deviceMetrics.channelUtilization
+                      ? (
+                        <p>
+                          Channel utilization:{" "}
+                          {device.deviceMetrics.channelUtilization.toFixed(2)}%
+                        </p>
+                      )
+                      : null}
+                    {device.deviceMetrics.batteryLevel
+                      ? (
+                        <p>
+                          Battery level:{" "}
+                          {device.deviceMetrics.batteryLevel.toFixed(2)}%
+                        </p>
+                      )
+                      : null}
+                    {device.deviceMetrics.voltage
+                      ? (
+                        <p>
+                          Voltage: {device.deviceMetrics.voltage.toFixed(2)}V
+                        </p>
+                      )
+                      : null}
+                    {device.deviceMetrics.uptimeSeconds
+                      ? (
+                        <p>
+                          Uptime:{" "}
+                          <Uptime
+                            seconds={device.deviceMetrics.uptimeSeconds}
+                          />
+                        </p>
+                      )
+                      : null}
+                  </div>
+                )
+                : null}
+
+              {device
+                ? (
+                  <div className="mt-5 w-full max-w-[464px] bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                    <Accordion
+                      className="AccordionRoot"
+                      type="single"
+                      collapsible
                    >
-                      {device.position.latitudeI / 1e7},{" "}
-                      {device.position.longitudeI / 1e7}
-                    </a>
-                  </p>
-                ) : null}
-                {device.position.altitude ? (
-                  <p>Altitude: {device.position.altitude}m</p>
-                ) : null}
-              </div>
-            ) : null}
-
-            {device.deviceMetrics ? (
-              <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-                  Device Metrics:
-                </p>
-                {device.deviceMetrics.airUtilTx ? (
-                  <p>
-                    Air TX utilization:{" "}
-                    {device.deviceMetrics.airUtilTx.toFixed(2)}%
-                  </p>
-                ) : null}
-                {device.deviceMetrics.channelUtilization ? (
-                  <p>
-                    Channel utilization:{" "}
-                    {device.deviceMetrics.channelUtilization.toFixed(2)}%
-                  </p>
-                ) : null}
-                {device.deviceMetrics.batteryLevel ? (
-                  <p>
-                    Battery level:{" "}
-                    {device.deviceMetrics.batteryLevel.toFixed(2)}%
-                  </p>
-                ) : null}
-                {device.deviceMetrics.voltage ? (
-                  <p>Voltage: {device.deviceMetrics.voltage.toFixed(2)}V</p>
-                ) : null}
-                {device.deviceMetrics.uptimeSeconds ? (
-                  <p>
-                    Uptime:{" "}
-                    <Uptime seconds={device.deviceMetrics.uptimeSeconds} />
-                  </p>
-                ) : null}
-              </div>
-            ) : null}
-
-            {device ? (
-              <div className="mt-5 w-full max-w-[464px] bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                <Accordion className="AccordionRoot" type="single" collapsible>
-                  <AccordionItem className="AccordionItem" value="item-1">
-                    <AccordionTrigger>
-                      <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-                        All Raw Metrics:
-                      </p>
-                    </AccordionTrigger>
-                    <AccordionContent className="overflow-x-scroll">
-                      <pre className="text-xs w-full">
+                      <AccordionItem className="AccordionItem" value="item-1">
+                        <AccordionTrigger>
+                          <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+                            All Raw Metrics:
+                          </p>
+                        </AccordionTrigger>
+                        <AccordionContent className="overflow-x-scroll">
+                          <pre className="text-xs w-full">
                        {JSON.stringify(device, null, 2)}
-                      </pre>
-                    </AccordionContent>
-                  </AccordionItem>
-                </Accordion>
-              </div>
-            ) : null}
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ) : null;
+                          </pre>
+                        </AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
+                  </div>
+                )
+                : null}
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+    : null;
 };
@@ -1,17 +1,17 @@
-import { toast } from "@app/core/hooks/useToast";
-import { useAppStore } from "@app/core/stores/appStore";
-import { useDevice } from "@app/core/stores/deviceStore";
+import { toast } from "../../core/hooks/useToast.ts";
+import { useAppStore } from "../../core/stores/appStore.ts";
+import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
-} from "@components/UI/Dialog";
+} from "../UI/Dialog.tsx";
 import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { TrashIcon } from "lucide-react";
-import type { JSX } from "react";
-import { Button } from "../UI/Button";
+
+import { Button } from "../UI/Button.tsx";

 export interface NodeOptionsDialogProps {
  node: Protobuf.Mesh.NodeInfo | undefined;
@@ -23,7 +23,7 @@ export const NodeOptionsDialog = ({
  node,
  open,
  onOpenChange,
-}: NodeOptionsDialogProps): JSX.Element => {
+}: NodeOptionsDialogProps) => {
  const { setDialogOpen, connection, setActivePage } = useDevice();
  const {
    setNodeNumToBeRemoved,
@@ -31,11 +31,9 @@ export const NodeOptionsDialog = ({
    setChatType,
    setActiveChat,
  } = useAppStore();
-  const longName =
-    node?.user?.longName ??
+  const longName = node?.user?.longName ??
    (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown");
-  const shortName =
-    node?.user?.shortName ??
+  const shortName = node?.user?.shortName ??
    (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK");

  function handleDirectMessage() {
@@ -53,7 +51,7 @@ export const NodeOptionsDialog = ({
    connection?.requestPosition(node.num).then(() =>
      toast({
        title: "Position request sent.",
-      }),
+      })
    );
    onOpenChange();
  }
@@ -66,7 +64,7 @@ export const NodeOptionsDialog = ({
    connection?.traceRoute(node.num).then(() =>
      toast({
        title: "Traceroute sent.",
-      }),
+      })
    );
    onOpenChange();
  }
@@ -1,5 +1,5 @@
-import { useDevice } from "@app/core/stores/deviceStore";
-import { Button } from "@components/UI/Button";
+import { useDevice } from "../../core/stores/deviceStore.ts";
+import { Button } from "../UI/Button.tsx";
 import {
  Dialog,
  DialogContent,
@@ -40,7 +40,7 @@ export const PkiBackupDialog = ({
  const renderPrintWindow = React.useCallback(() => {
    if (!privateKey || !publicKey) return;

-    const printWindow = window.open("", "_blank");
+    const printWindow = globalThis.open("", "_blank");
    if (printWindow) {
      printWindow.document.write(`
        <html>
@@ -116,14 +116,14 @@ export const PkiBackupDialog = ({
        </DialogHeader>
        <DialogFooter className="mt-6">
          <Button
-            variant={"default"}
+            variant="default"
            onClick={() => createDownloadKeyFile()}
            className=""
          >
            <DownloadIcon size={20} className="mr-2" />
            Download
          </Button>
-          <Button variant={"default"} onClick={() => renderPrintWindow()}>
+          <Button variant="default" onClick={() => renderPrintWindow()}>
            <PrinterIcon size={20} className="mr-2" />
            Print
          </Button>
@@ -18,7 +18,7 @@ export const PkiRegenerateDialog = ({
  open,
  onOpenChange,
  onSubmit,
-}: PkiRegenerateDialogProps): JSX.Element => {
+}: PkiRegenerateDialogProps) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
@@ -28,7 +28,7 @@ export const QRDialog = ({
  onOpenChange,
  loraConfig,
  channels,
-}: QRDialogProps): JSX.Element => {
+}: QRDialogProps) => {
  const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
  const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
@@ -77,8 +77,8 @@ export const QRDialog = ({
                    {channel.settings?.name.length
                      ? channel.settings.name
                      : channel.role === Protobuf.Channel.Channel_Role.PRIMARY
-                        ? "Primary"
-                        : `Channel: ${channel.index}`}
+                      ? "Primary"
+                      : `Channel: ${channel.index}`}
                  </Label>
                  <Checkbox
                    key={channel.index}
@@ -86,7 +86,9 @@ export const QRDialog = ({
                    onCheckedChange={() => {
                      if (selectedChannels.includes(channel.index)) {
                        setSelectedChannels(
-                          selectedChannels.filter((c) => c !== channel.index),
+                          selectedChannels.filter((c) =>
+                            c !== channel.index
+                          ),
                        );
                      } else {
                        setSelectedChannels([
@@ -130,7 +132,7 @@ export const QRDialog = ({
          <Label>Sharable URL</Label>
          <Input
            value={qrCodeUrl}
-            disabled={true}
+            disabled
            className="dark:text-slate-900"
            action={{
              icon: ClipboardIcon,
@@ -19,7 +19,7 @@ export interface RebootDialogProps {
 export const RebootDialog = ({
  open,
  onOpenChange,
-}: RebootDialogProps): JSX.Element => {
+}: RebootDialogProps) => {
  const { connection } = useDevice();

  const [time, setTime] = useState<number>(5);
@@ -1,4 +1,4 @@
-import { useAppStore } from "@app/core/stores/appStore";
+import { useAppStore } from "../../core/stores/appStore.ts";
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import { Button } from "@components/UI/Button.tsx";
 import {
@@ -19,7 +19,7 @@ export interface RemoveNodeDialogProps {
 export const RemoveNodeDialog = ({
  open,
  onOpenChange,
-}: RemoveNodeDialogProps): JSX.Element => {
+}: RemoveNodeDialogProps) => {
  const { connection, nodes, removeNode } = useDevice();
  const { nodeNumToBeRemoved } = useAppStore();

@@ -19,7 +19,7 @@ export interface ShutdownDialogProps {
 export const ShutdownDialog = ({
  open,
  onOpenChange,
-}: ShutdownDialogProps): JSX.Element => {
+}: ShutdownDialogProps) => {
  const { connection } = useDevice();

  const [time, setTime] = useState<number>(5);
@@ -1,15 +1,15 @@
-import { useDevice } from "@app/core/stores/deviceStore";
+import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
-} from "@components/UI/Dialog";
+} from "../UI/Dialog.tsx";
 import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import type { JSX } from "react";
-import { TraceRoute } from "../PageComponents/Messages/TraceRoute";
+
+import { TraceRoute } from "../PageComponents/Messages/TraceRoute.tsx";

 export interface TracerouteResponseDialogProps {
  traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery> | undefined;
@@ -21,18 +21,16 @@ export const TracerouteResponseDialog = ({
  traceroute,
  open,
  onOpenChange,
-}: TracerouteResponseDialogProps): JSX.Element => {
+}: TracerouteResponseDialogProps) => {
  const { nodes } = useDevice();
  const route: number[] = traceroute?.data.route ?? [];
  const routeBack: number[] = traceroute?.data.routeBack ?? [];
  const snrTowards = traceroute?.data.snrTowards ?? [];
  const snrBack = traceroute?.data.snrBack ?? [];
  const from = nodes.get(traceroute?.from ?? 0);
-  const longName =
-    from?.user?.longName ??
+  const longName = from?.user?.longName ??
    (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown");
-  const shortName =
-    from?.user?.shortName ??
+  const shortName = from?.user?.shortName ??
    (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK");
  const to = nodes.get(traceroute?.to ?? 0);
  return (