Add monorepo support to project (#682)

* feat: add monorepo support

* fix: correct relatedProjects structure in vercel.json

* update github actions with monorepo support

* removed legacy dep

* moved jsr config into web package

packages/web/src/components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.test.tsx

@@ -0,0 +1,80 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+// Ensure the path is correct for import
+import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
+import { DeleteMessagesDialog } from "@components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx";
+
+vi.mock("@core/stores/messageStore", () => ({
+  useMessageStore: vi.fn(() => ({
+    deleteAllMessages: vi.fn(),
+  })),
+}));
+
+describe("DeleteMessagesDialog", () => {
+  const mockOnOpenChange = vi.fn();
+  const mockClearAllMessages = vi.fn();
+
+  beforeEach(() => {
+    mockOnOpenChange.mockClear();
+    mockClearAllMessages.mockClear();
+
+    const mockedUseMessageStore = vi.mocked(useMessageStore);
+    mockedUseMessageStore.mockImplementation(() => ({
+      deleteAllMessages: mockClearAllMessages,
+    }));
+    mockedUseMessageStore.mockClear();
+  });
+
+  it("calls onOpenChange with false when the close button (X) is clicked", () => {
+    render(
+      <DeleteMessagesDialog open onOpenChange={mockOnOpenChange} />,
+    );
+    const closeButton = screen.queryByTestId("dialog-close-button");
+    if (!closeButton) {
+      throw new Error(
+        "Dialog close button with data-testid='dialog-close-button' not found. Did you add it to the component?",
+      );
+    }
+    fireEvent.click(closeButton);
+    expect(mockOnOpenChange).toHaveBeenCalledTimes(1);
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("renders the dialog when open is true", () => {
+    render(
+      <DeleteMessagesDialog open onOpenChange={mockOnOpenChange} />,
+    );
+    expect(screen.getByText("Clear All Messages")).toBeInTheDocument();
+    expect(screen.getByText(/This action will clear all message history./))
+      .toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Clear Messages" }))
+      .toBeInTheDocument();
+  });
+
+  it("does not render the dialog when open is false", () => {
+    render(
+      <DeleteMessagesDialog open={false} onOpenChange={mockOnOpenChange} />,
+    );
+    expect(screen.queryByText("Clear All Messages")).toBeNull();
+  });
+
+  it("calls onOpenChange with false when the dismiss button is clicked", () => {
+    render(
+      <DeleteMessagesDialog open onOpenChange={mockOnOpenChange} />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(mockOnOpenChange).toHaveBeenCalledTimes(1); // Add count check
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("calls deleteAllMessages and onOpenChange with false when the clear messages button is clicked", () => {
+    render(
+      <DeleteMessagesDialog open onOpenChange={mockOnOpenChange} />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Clear Messages" }));
+    expect(mockClearAllMessages).toHaveBeenCalledTimes(1);
+    expect(mockOnOpenChange).toHaveBeenCalledTimes(1); // Add count check
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+});

packages/web/src/components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { AlertTriangleIcon } from "lucide-react";
+import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
+import { useTranslation } from "react-i18next";
+
+export interface DeleteMessagesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DeleteMessagesDialog = ({
+  open,
+  onOpenChange,
+}: DeleteMessagesDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { deleteAllMessages } = useMessageStore();
+  const handleCloseDialog = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose data-testid="dialog-close-button" />
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangleIcon className="h-5 w-5 text-warning" />
+            {t("deleteMessages.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("deleteMessages.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-4">
+          <Button
+            variant="outline"
+            onClick={handleCloseDialog}
+            name="dismiss"
+          >
+            {t("button.dismiss")}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              deleteAllMessages();
+              handleCloseDialog();
+            }}
+            name="clearMessages"
+          >
+            {t("button.clearMessages")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/DeviceNameDialog.tsx

@@ -0,0 +1,148 @@
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { create } from "@bufbuild/protobuf";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Protobuf } from "@meshtastic/core";
+import { useForm } from "react-hook-form";
+import { GenericInput } from "@components/Form/FormInput.tsx";
+import { useTranslation } from "react-i18next";
+import { Label } from "../UI/Label.tsx";
+import z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export interface User {
+  longName: string;
+  shortName: string;
+}
+
+export interface DeviceNameDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DeviceNameDialog = ({
+  open,
+  onOpenChange,
+}: DeviceNameDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { hardware, getNode, connection } = useDevice();
+  const myNode = getNode(hardware.myNodeNum);
+
+  const defaultValues = {
+    shortName: myNode?.user?.shortName ?? "",
+    longName: myNode?.user?.longName ?? "",
+  };
+
+  const deviceNameSchema = z.object({
+    longName: z
+      .string()
+      .min(1, t("deviceName.validation.longNameMin"))
+      .max(40, t("deviceName.validation.longNameMax")),
+    shortName: z
+      .string()
+      .min(2, t("deviceName.validation.shortNameMin"))
+      .max(4, t("deviceName.validation.shortNameMax")),
+  });
+
+  const { getValues, reset, control, handleSubmit } = useForm<User>({
+    values: defaultValues,
+    resolver: zodResolver(deviceNameSchema),
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    connection?.setOwner(
+      create(Protobuf.Mesh.UserSchema, {
+        ...data,
+      }),
+    );
+    onOpenChange(false);
+  });
+
+  const handleReset = () => {
+    reset(defaultValues);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("deviceName.title")}</DialogTitle>
+          <DialogDescription>
+            {t("deviceName.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <div>
+            <Label htmlFor="longName">
+              {t("deviceName.longName")}
+            </Label>
+            <GenericInput
+              control={control}
+              field={{
+                name: "longName",
+                label: t("deviceName.longName"),
+                type: "text",
+                properties: {
+                  className: "text-slate-900 dark:text-slate-200",
+                  fieldLength: {
+                    currentValueLength: getValues("longName").length,
+                    max: 40,
+                    min: 1,
+                    showCharacterCount: true,
+                  },
+                },
+              }}
+            />
+          </div>
+          <div>
+            <Label htmlFor="shortName">
+              {t("deviceName.shortName")}
+            </Label>
+            <GenericInput
+              control={control}
+              field={{
+                name: "shortName",
+                label: t("deviceName.shortName"),
+                type: "text",
+                properties: {
+                  fieldLength: {
+                    currentValueLength: getValues("shortName").length,
+                    max: 4,
+                    min: 1,
+                    showCharacterCount: true,
+                  },
+                },
+              }}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="destructive"
+              name="reset"
+              onClick={handleReset}
+            >
+              {t("button.reset")}
+            </Button>
+            <Button
+              type="submit"
+              name="save"
+            >
+              {t("button.save")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/DialogManager.tsx

@@ -0,0 +1,96 @@
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { RemoveNodeDialog } from "@components/Dialog/RemoveNodeDialog.tsx";
+import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
+import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
+import { PkiBackupDialog } from "@components/Dialog/PKIBackupDialog.tsx";
+import { QRDialog } from "@components/Dialog/QRDialog.tsx";
+import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
+import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
+import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
+import { UnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx";
+import { RefreshKeysDialog } from "@components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx";
+import { RebootOTADialog } from "@components/Dialog/RebootOTADialog.tsx";
+import { DeleteMessagesDialog } from "@components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx";
+
+export const DialogManager = () => {
+  const { channels, config, dialog, setDialogOpen } = useDevice();
+  return (
+    <>
+      <QRDialog
+        open={dialog.QR}
+        onOpenChange={(open) => {
+          setDialogOpen("QR", open);
+        }}
+        channels={channels}
+        loraConfig={config.lora}
+      />
+      <ImportDialog
+        open={dialog.import}
+        onOpenChange={(open) => {
+          setDialogOpen("import", open);
+        }}
+        loraConfig={config.lora}
+      />
+      <ShutdownDialog
+        open={dialog.shutdown}
+        onOpenChange={() => {
+          setDialogOpen("shutdown", false);
+        }}
+      />
+      <RebootDialog
+        open={dialog.reboot}
+        onOpenChange={() => {
+          setDialogOpen("reboot", false);
+        }}
+      />
+      <DeviceNameDialog
+        open={dialog.deviceName}
+        onOpenChange={(open) => {
+          setDialogOpen("deviceName", open);
+        }}
+      />
+      <RemoveNodeDialog
+        open={dialog.nodeRemoval}
+        onOpenChange={(open) => {
+          setDialogOpen("nodeRemoval", open);
+        }}
+      />
+      <PkiBackupDialog
+        open={dialog.pkiBackup}
+        onOpenChange={(open) => {
+          setDialogOpen("pkiBackup", open);
+        }}
+      />
+      <NodeDetailsDialog
+        open={dialog.nodeDetails}
+        onOpenChange={(open) => {
+          setDialogOpen("nodeDetails", open);
+        }}
+      />
+      <UnsafeRolesDialog
+        open={dialog.unsafeRoles}
+        onOpenChange={(open) => {
+          setDialogOpen("unsafeRoles", open);
+        }}
+      />
+      <RefreshKeysDialog
+        open={dialog.refreshKeys}
+        onOpenChange={(open) => {
+          setDialogOpen("refreshKeys", open);
+        }}
+      />
+      <RebootOTADialog
+        open={dialog.rebootOTA}
+        onOpenChange={(open) => {
+          setDialogOpen("rebootOTA", open);
+        }}
+      />
+      <DeleteMessagesDialog
+        open={dialog.deleteMessages}
+        onOpenChange={(open) => {
+          setDialogOpen("deleteMessages", open);
+        }}
+      />
+    </>
+  );
+};

packages/web/src/components/Dialog/ImportDialog.tsx

@@ -0,0 +1,176 @@
+import { create, fromBinary } from "@bufbuild/protobuf";
+import { Button } from "@components/UI/Button.tsx";
+import { Checkbox } from "../UI/Checkbox/index.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
+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 { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface ImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  loraConfig?: Protobuf.Config.Config_LoRaConfig;
+}
+
+export const ImportDialog = ({
+  open,
+  onOpenChange,
+}: ImportDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const [importDialogInput, setImportDialogInput] = useState<string>("");
+  const [channelSet, setChannelSet] = useState<Protobuf.AppOnly.ChannelSet>();
+  const [validUrl, setValidUrl] = useState<boolean>(false);
+
+  const { connection } = useDevice();
+
+  useEffect(() => {
+    // the channel information is contained in the URL's fragment, which will be present after a
+    // non-URL encoded `#`.
+    try {
+      const channelsUrl = new URL(importDialogInput);
+      if (
+        (channelsUrl.hostname !== "meshtastic.org" &&
+          channelsUrl.pathname !== "/e/") ||
+        !channelsUrl.hash
+      ) {
+        throw t("import.error.invalidUrl");
+      }
+
+      const encodedChannelConfig = channelsUrl.hash.substring(1);
+      const paddedString = encodedChannelConfig
+        .padEnd(
+          encodedChannelConfig.length +
+            ((4 - (encodedChannelConfig.length % 4)) % 4),
+          "=",
+        )
+        .replace(/-/g, "+")
+        .replace(/_/g, "/");
+      setChannelSet(
+        fromBinary(
+          Protobuf.AppOnly.ChannelSetSchema,
+          toByteArray(paddedString),
+        ),
+      );
+      setValidUrl(true);
+    } catch (_error) {
+      setValidUrl(false);
+      setChannelSet(undefined);
+    }
+  }, [importDialogInput]);
+
+  const apply = () => {
+    channelSet?.settings.map(
+      (ch: Protobuf.Channel.ChannelSettings, index: number) => {
+        connection?.setChannel(
+          create(Protobuf.Channel.ChannelSchema, {
+            index,
+            role: index === 0
+              ? Protobuf.Channel.Channel_Role.PRIMARY
+              : Protobuf.Channel.Channel_Role.SECONDARY,
+            settings: ch,
+          }),
+        );
+      },
+    );
+
+    if (channelSet?.loraConfig) {
+      connection?.setConfig(
+        create(Protobuf.Config.ConfigSchema, {
+          payloadVariant: {
+            case: "lora",
+            value: channelSet.loraConfig,
+          },
+        }),
+      );
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("import.title")}</DialogTitle>
+          <DialogDescription>
+            {t("import.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <Label>{t("import.channelSetUrl")}</Label>
+          <Input
+            value={importDialogInput}
+            suffix={validUrl ? "✅" : "❌"}
+            onChange={(e) => {
+              setImportDialogInput(e.target.value);
+            }}
+          />
+          {validUrl && (
+            <div className="flex flex-col gap-3">
+              <div className="flex w-full gap-2">
+                <div className="w-36">
+                  <Label>{t("import.usePreset")}</Label>
+                  <Switch
+                    disabled
+                    checked={channelSet?.loraConfig?.usePreset ?? true}
+                  />
+                </div>
+                {
+                  /* <Select
+                  label="Modem Preset"
+                  disabled
+                  value={channelSet?.loraConfig?.modemPreset}
+                >
+                  {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
+                </Select> */
+                }
+              </div>
+              {
+                /* <Select
+                label="Region"
+                disabled
+                value={channelSet?.loraConfig?.region}
+              >
+                {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+              </Select> */
+              }
+
+              <span className="text-md block font-medium text-text-primary">
+                {t("import.channels")}
+              </span>
+              <div className="flex w-40 flex-col gap-1">
+                {channelSet?.settings.map((channel) => (
+                  <div className="flex justify-between" key={channel.id}>
+                    <Label>
+                      {channel.name.length
+                        ? channel.name
+                        : `${t("import.channelPrefix")}${channel.id}`}
+                    </Label>
+                    <Checkbox key={channel.id} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button onClick={apply} disabled={!validUrl} name="apply">
+            {t("button.apply")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/LocationResponseDialog.tsx

@@ -0,0 +1,93 @@
+import { useDevice } from "@core/stores/deviceStore.ts";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../UI/Dialog.tsx";
+import type { Protobuf, Types } from "@meshtastic/core";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { useTranslation } from "react-i18next";
+
+export interface LocationResponseDialogProps {
+  location: Types.PacketMetadata<Protobuf.Mesh.Position> | undefined;
+  open: boolean;
+  onOpenChange: () => void;
+}
+
+export const LocationResponseDialog = ({
+  location,
+  open,
+  onOpenChange,
+}: LocationResponseDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { getNode } = useDevice();
+
+  const from = getNode(location?.from ?? 0);
+  const longName = from?.user?.longName ??
+    (from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
+  const shortName = from?.user?.shortName ??
+    (from
+      ? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
+      : t("unknown.shortName"));
+
+  const position = location?.data;
+
+  const hasCoordinates = position &&
+    typeof position.latitudeI === "number" &&
+    typeof position.longitudeI === "number" &&
+    typeof position.altitude === "number";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("locationResponse.title", {
+              identifier: `${longName} (${shortName})`,
+            })}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          {hasCoordinates
+            ? (
+              <div className="ml-5 flex">
+                <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+                  <p>
+                    {t("locationResponse.coordinates")}
+                    <a
+                      className="text-blue-500 dark:text-blue-400"
+                      href={`https://www.openstreetmap.org/?mlat=${
+                        position.latitudeI ?? 0 / 1e7
+                      }&mlon=${position.longitudeI ?? 0 / 1e7}&layers=N`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {" "}
+                      {position.latitudeI ?? 0 / 1e7},{" "}
+                      {position.longitudeI ?? 0 / 1e7}
+                    </a>
+                  </p>
+                  <p>
+                    {t("locationResponse.altitude")} {position.altitude}
+                    {(position.altitude ?? 0) < 1
+                      ? t("unit.meter.one")
+                      : t("unit.meter.plural")}
+                  </p>
+                </span>
+              </div>
+            )
+            : (
+              // Optional: Show a message if coordinates are not available
+              <p className="text-textPrimary">
+                {t("locationResponse.noCoordinates")}
+              </p>
+            )}
+        </DialogDescription>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/ManagedModeDialog.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Trans, useTranslation } from "react-i18next";
+import { Checkbox } from "@components/UI/Checkbox/index.tsx";
+import { useState } from "react";
+
+export interface ManagedModeDialogProps {
+  open: boolean;
+  onOpenChange: () => void;
+  onSubmit: () => void;
+}
+
+export const ManagedModeDialog = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}: ManagedModeDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const [confirmState, setConfirmState] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("managedMode.title")}</DialogTitle>
+          <DialogDescription>
+            <Trans
+              i18nKey="managedMode.description"
+              components={{
+                "bold": <p className="font-bold inline" />,
+              }}
+            />
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="managedMode"
+            checked={confirmState}
+            onChange={() => setConfirmState(!confirmState)}
+            name="confirmUnderstanding"
+          >
+            <p className="dark:text-white pt-1">
+              {t("managedMode.confirmUnderstanding")}
+            </p>
+          </Checkbox>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="destructive"
+            name="regenerate"
+            disabled={!confirmState}
+            onClick={() => {
+              setConfirmState(false);
+              onSubmit();
+            }}
+          >
+            {t("button.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/NewDeviceDialog.tsx

@@ -0,0 +1,188 @@
+import {
+  type BrowserFeature,
+  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";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@components/UI/Tabs.tsx";
+import { AlertCircle } from "lucide-react";
+import { Trans, useTranslation } from "react-i18next";
+import { Link } from "../UI/Typography/Link.tsx";
+
+export interface TabElementProps {
+  closeDialog: () => void;
+}
+
+export interface TabManifest {
+  id: "HTTP" | "BLE" | "Serial";
+  label: string;
+  element: React.FC<TabElementProps>;
+  isDisabled: boolean;
+}
+
+export interface NewDeviceProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+interface FeatureErrorProps {
+  missingFeatures: BrowserFeature[];
+  tabId: "HTTP" | "BLE" | "Serial";
+}
+
+const errors: Record<BrowserFeature, { href: string; i18nKey: string }> = {
+  "Web Bluetooth": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
+    i18nKey: "newDeviceDialog.validation.requiresWebBluetooth",
+  },
+  "Web Serial": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
+    i18nKey: "newDeviceDialog.validation.requiresWebSerial",
+  },
+  "Secure Context": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
+    i18nKey: "newDeviceDialog.validation.requiresSecureContext",
+  },
+};
+
+const ErrorMessage = ({ missingFeatures, tabId }: FeatureErrorProps) => {
+  if (missingFeatures.length === 0) return null;
+
+  const browserFeatures = missingFeatures.filter(
+    (feature) => feature !== "Secure Context",
+  );
+  const needsSecureContext = missingFeatures.includes("Secure Context");
+
+  const needsFeature =
+    (tabId === "BLE" && browserFeatures.includes("Web Bluetooth"))
+      ? "Web Bluetooth"
+      : (tabId === "Serial" && browserFeatures.includes("Web Serial"))
+      ? "Web Serial"
+      : undefined;
+
+  return (
+    <div className="flex flex-col items-start gap-2 bg-red-500 p-4 rounded-md text-sm text-slate-500 dark:text-slate-400">
+      <div className="flex items-center gap-2 w-full">
+        <AlertCircle size={40} className="mr-2 shrink-0 text-white" />
+        <div className="flex flex-col gap-3">
+          <div className="text-sm text-white">
+            {needsFeature && (
+              <Trans
+                i18nKey={errors[needsFeature].i18nKey}
+                components={[
+                  <Link
+                    key="0"
+                    href={errors[needsFeature].href}
+                    className="underline hover:text-slate-200 text-white dark:text-white dark:hover:text-slate-300"
+                  />,
+                ]}
+              />
+            )}
+            {needsFeature && needsSecureContext && " "}
+            {needsSecureContext && (
+              <Trans
+                i18nKey={browserFeatures.length > 0
+                  ? "newDeviceDialog.validation.additionallyRequiresSecureContext"
+                  : "newDeviceDialog.validation.requiresSecureContext"}
+                components={{
+                  "0": (
+                    <Link
+                      href={errors["Secure Context"].href}
+                      className="underline hover:text-slate-200"
+                    />
+                  ),
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const NewDeviceDialog = ({
+  open,
+  onOpenChange,
+}: NewDeviceProps) => {
+  const { t } = useTranslation("dialog");
+  const { unsupported } = useBrowserFeatureDetection();
+
+  const tabs: TabManifest[] = [
+    {
+      id: "HTTP",
+      label: t("newDeviceDialog.tabHttp"),
+      element: HTTP,
+      isDisabled: false,
+    },
+    {
+      id: "BLE",
+      label: t("newDeviceDialog.tabBluetooth"),
+      element: BLE,
+      isDisabled: unsupported.includes("Web Bluetooth") ||
+        unsupported.includes("Secure Context"),
+    },
+    {
+      id: "Serial",
+      label: t("newDeviceDialog.tabSerial"),
+      element: Serial,
+      isDisabled: unsupported.includes("Web Serial") ||
+        unsupported.includes("Secure Context"),
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent aria-describedby={undefined}>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("newDeviceDialog.title")}</DialogTitle>
+        </DialogHeader>
+        <Tabs defaultValue="HTTP">
+          <TabsList>
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabs.map((tab) => (
+            <TabsContent key={tab.id} value={tab.id}>
+              <fieldset disabled={tab.isDisabled}>
+                {(tab.id !== "HTTP" &&
+                    tab.isDisabled)
+                  ? (
+                    <ErrorMessage
+                      missingFeatures={unsupported}
+                      tabId={tab.id}
+                    />
+                  )
+                  : (
+                    <tab.element
+                      closeDialog={() => onOpenChange(false)}
+                    />
+                  )}
+              </fieldset>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -0,0 +1,379 @@
+import { useEffect, useState } from "react";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { Protobuf } from "@meshtastic/core";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { DeviceImage } from "@components/generic/DeviceImage.tsx";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
+import { Uptime } from "@components/generic/Uptime.tsx";
+import { toast } from "@core/hooks/useToast.ts";
+import { useFavoriteNode } from "@core/hooks/useFavoriteNode.ts";
+import { useIgnoreNode } from "@core/hooks/useIgnoreNode.ts";
+import { cn } from "@core/utils/cn.ts";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@components/UI/Accordion.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  BellIcon,
+  BellOffIcon,
+  MapPinnedIcon,
+  MessageSquareIcon,
+  StarIcon,
+  TrashIcon,
+  WaypointsIcon,
+} from "lucide-react";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@components/UI/Tooltip.tsx";
+import { Separator } from "@components/UI/Seperator.tsx";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "@tanstack/react-router";
+
+export interface NodeDetailsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const NodeDetailsDialog = ({
+  open,
+  onOpenChange,
+}: NodeDetailsDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { setDialogOpen, connection, getNode } = useDevice();
+  const navigate = useNavigate();
+  const { setNodeNumToBeRemoved, nodeNumDetails } = useAppStore();
+  const { updateFavorite } = useFavoriteNode();
+  const { updateIgnored } = useIgnoreNode();
+
+  const node = getNode(nodeNumDetails);
+
+  const [isFavoriteState, setIsFavoriteState] = useState<boolean>(
+    node?.isFavorite ?? false,
+  );
+  const [isIgnoredState, setIsIgnoredState] = useState<boolean>(
+    node?.isIgnored ?? false,
+  );
+
+  useEffect(() => {
+    if (!node) return;
+    setIsFavoriteState(node?.isFavorite);
+    setIsIgnoredState(node?.isIgnored);
+  }, [node]);
+
+  if (!node) return;
+
+  function handleDirectMessage() {
+    if (!node) return;
+    navigate({ to: `/messages/direct/${node.num}` });
+    setDialogOpen("nodeDetails", false);
+  }
+
+  function handleRequestPosition() {
+    if (!node) return;
+
+    toast({
+      title: t("toast.requestingPosition.title", { ns: "ui" }),
+    });
+    connection?.requestPosition(node.num).then(() =>
+      toast({
+        title: t("toast.positionRequestSent.title", { ns: "ui" }),
+      })
+    );
+    onOpenChange(false);
+  }
+
+  function handleTraceroute() {
+    if (!node) return;
+
+    toast({
+      title: t("toast.sendingTraceroute.title", { ns: "ui" }),
+    });
+    connection?.traceRoute(node.num).then(() =>
+      toast({
+        title: t("toast.tracerouteSent.title", { ns: "ui" }),
+      })
+    );
+    onOpenChange(false);
+  }
+
+  function handleNodeRemove() {
+    if (!node) return;
+
+    setNodeNumToBeRemoved(node?.num);
+    setDialogOpen("nodeRemoval", true);
+    onOpenChange(false);
+  }
+
+  function handleToggleFavorite() {
+    if (!node) return;
+
+    updateFavorite({ nodeNum: node.num, isFavorite: !isFavoriteState });
+    setIsFavoriteState(!isFavoriteState);
+  }
+
+  function handleToggleIgnored() {
+    if (!node) return;
+
+    updateIgnored({ nodeNum: node.num, isIgnored: !isIgnoredState });
+    setIsIgnoredState(!isIgnoredState);
+  }
+
+  const deviceMetricsMap = [
+    {
+      key: "airUtilTx",
+      label: t("nodeDetails.airTxUtilization"),
+      value: node.deviceMetrics?.airUtilTx,
+      format: (val: number) => `${val.toFixed(2)}%`,
+    },
+    {
+      key: "channelUtilization",
+      label: t("nodeDetails.channelUtilization"),
+      value: node.deviceMetrics?.channelUtilization,
+      format: (val: number) => `${val.toFixed(2)}%`,
+    },
+    {
+      key: "batteryLevel",
+      label: t("nodeDetails.batteryLevel"),
+      value: node.deviceMetrics?.batteryLevel,
+      format: (val: number) => `${val.toFixed(2)}%`,
+    },
+    {
+      key: "voltage",
+      label: t("nodeDetails.voltage"),
+      value: node.deviceMetrics?.voltage,
+      format: (val: number) => `${val.toFixed(2)}V`,
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent aria-describedby={undefined}>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("nodeDetails.title", {
+              identifier: `${node.user?.longName ?? t("unknown.shortName")} (${
+                node.user?.shortName ?? t("unknown.shortName")
+              })`,
+            })}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogFooter>
+          <div className="w-full">
+            <div className="flex flex-row flex-wrap space-y-1">
+              <Button
+                className="mr-1"
+                name="message"
+                onClick={handleDirectMessage}
+              >
+                <MessageSquareIcon className="mr-2" />
+                {t("nodeDetails.message")}
+              </Button>
+              <Button
+                className="mr-1"
+                name="traceRoute"
+                onClick={handleTraceroute}
+              >
+                <WaypointsIcon className="mr-2" />
+                {t("nodeDetails.traceRoute")}
+              </Button>
+              <Button className="mr-1" onClick={handleToggleFavorite}>
+                <StarIcon
+                  className={cn(
+                    isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "",
+                  )}
+                />
+              </Button>
+              <div className="flex flex-1 justify-start"></div>
+
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      className={cn(
+                        "flex justify-end mr-1 text-white",
+                        isIgnoredState
+                          ? "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white"
+                          : "",
+                      )}
+                      onClick={handleToggleIgnored}
+                    >
+                      {isIgnoredState ? <BellIcon /> : <BellOffIcon />}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                    {isIgnoredState
+                      ? t("nodeDetails.unignoreNode")
+                      : t("nodeDetails.ignoreNode")}
+                    <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      className="flex justify-end"
+                      onClick={handleNodeRemove}
+                    >
+                      <TrashIcon />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                    {t("nodeDetails.removeNode")}
+                    <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+
+            <Separator className="mt-5 mb-2" />
+
+            <div className="flex flex-col flex-wrap space-x-1 space-y-1">
+              <div className="flex flex-row space-x-2">
+                <div className="w-full bg-slate-100 text-slate-900 dark:text-slate-100 dark:bg-slate-800 p-3  rounded-lg">
+                  <p className="text-lg font-semibold">
+                    {t("nodeDetails.details")}
+                  </p>
+                  <p>{t("nodeDetails.nodeNumber")}{node.num}</p>
+                  <p>
+                    {t("nodeDetails.nodeHexPrefix")}
+                    {numberToHexUnpadded(node.num)}
+                  </p>
+                  <p>
+                    {t("nodeDetails.role")}
+                    {Protobuf.Config.Config_DeviceConfig_Role[
+                      node.user?.role ?? 0
+                    ].replace(/_/g, " ")}
+                  </p>
+                  <p>
+                    {t("nodeDetails.lastHeard")}
+                    {node.lastHeard === 0
+                      ? t("nodesTable.lastHeardStatus.never", { ns: "nodes" })
+                      : <TimeAgo timestamp={node.lastHeard * 1000} />}
+                  </p>
+                  <p>
+                    {t("nodeDetails.hardware")}
+                    {(Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ??
+                      t("unknown.shortName"))
+                      .replace(/_/g, " ")}
+                  </p>
+                </div>
+                <DeviceImage
+                  className="h-45 w-45 p-2 rounded-lg border-4 border-slate-200 dark:border-slate-800"
+                  deviceType={Protobuf.Mesh
+                    .HardwareModel[node.user?.hwModel ?? 0]}
+                />
+              </div>
+            </div>
+
+            <div>
+              <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                <p className="text-lg font-semibold">
+                  {t("nodeDetails.position")}
+                </p>
+
+                {node.position
+                  ? (
+                    <>
+                      {node.position.latitudeI &&
+                        node.position.longitudeI && (
+                        <p>
+                          {t("locationResponse.coordinates")}
+                          <a
+                            className="text-blue-500 dark:text-blue-400"
+                            href={`https://www.openstreetmap.org/?mlat=${
+                              node.position.latitudeI / 1e7
+                            }&mlon=${node.position.longitudeI / 1e7}&layers=N`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {node.position.latitudeI / 1e7},{" "}
+                            {node.position.longitudeI / 1e7}
+                          </a>
+                        </p>
+                      )}
+                      {node.position.altitude && (
+                        <p>
+                          {t("locationResponse.altitude")}
+                          {node.position.altitude}
+                          {t("unit.meter.one")}
+                        </p>
+                      )}
+                    </>
+                  )
+                  : <p>{t("unknown.shortName")}</p>}
+                <Button
+                  onClick={handleRequestPosition}
+                  name="requestPosition"
+                  className="mt-2"
+                >
+                  <MapPinnedIcon className="mr-2" />
+                  {t("nodeDetails.requestPosition")}
+                </Button>
+              </div>
+
+              {node.deviceMetrics && (
+                <div className="text-slate-900 dark:text-slate-100 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-100">
+                    {t("nodeDetails.deviceMetrics")}
+                  </p>
+                  {deviceMetricsMap.map(
+                    (metric) =>
+                      metric.value !== undefined && (
+                        <p key={metric.key}>
+                          {metric.label}: {metric.format(metric.value)}
+                        </p>
+                      ),
+                  )}
+                  {node.deviceMetrics.uptimeSeconds && (
+                    <p>
+                      {t("nodeDetails.uptime")}
+                      <Uptime seconds={node.deviceMetrics.uptimeSeconds} />
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="text-slate-900 dark:text-slate-100 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">
+                      {t("nodeDetails.allRawMetrics")}
+                    </p>
+                  </AccordionTrigger>
+                  <AccordionContent className="overflow-x-scroll">
+                    <pre className="text-xs w-full">
+                      {JSON.stringify(node, null, 2)}
+                    </pre>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/PKIBackupDialog.tsx

@@ -0,0 +1,151 @@
+import { useDevice } from "../../core/stores/deviceStore.ts";
+import { Button } from "../UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { fromByteArray } from "base64-js";
+import { DownloadIcon, PrinterIcon } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export interface PkiBackupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const PkiBackupDialog = ({
+  open,
+  onOpenChange,
+}: PkiBackupDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { config, setDialogOpen, getMyNode } = useDevice();
+  const privateKey = config.security?.privateKey;
+  const publicKey = config.security?.publicKey;
+
+  const decodeKeyData = React.useCallback(
+    (key: Uint8Array<ArrayBufferLike>) => {
+      if (!key) return "";
+      return fromByteArray(key ?? new Uint8Array(0));
+    },
+    [],
+  );
+
+  const closeDialog = React.useCallback(() => {
+    setDialogOpen("pkiBackup", false);
+  }, [setDialogOpen]);
+
+  const renderPrintWindow = React.useCallback(() => {
+    if (!privateKey || !publicKey) return;
+
+    const printWindow = globalThis.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>${
+        t("pkiBackup.header", {
+          shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
+          longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
+        })
+      }</title>
+            <style>
+              body { font-family: Arial, sans-serif; padding: 20px; }
+              h1 { font-size: 18px; }
+              p { font-size: 14px; word-break: break-all; }
+            </style>
+          </head>
+          <body>
+            <h1>${
+        t("pkiBackup.header", {
+          shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
+          longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
+        })
+      }</h1>
+            <h3>${t("pkiBackup.secureBackup")}</h3>
+            <h3>${t("pkiBackup.publicKey")}</h3>
+            <p>${decodeKeyData(publicKey)}</p>
+            <h3>${t("pkiBackup.privateKey")}</h3>
+            <p>${decodeKeyData(privateKey)}</p>
+            <p>${t("pkiBackup.footer")}</p>
+          </body>
+        </html>
+      `);
+      printWindow.document.close();
+      printWindow.print();
+      closeDialog();
+    }
+  }, [decodeKeyData, privateKey, publicKey, closeDialog, t]);
+
+  const createDownloadKeyFile = React.useCallback(() => {
+    if (!privateKey || !publicKey) return;
+
+    const decodedPrivateKey = decodeKeyData(privateKey);
+    const decodedPublicKey = decodeKeyData(publicKey);
+
+    const formattedContent = [
+      `${t("pkiBackup.header")}\n\n`,
+      `${t("pkiBackup.privateKey")}\n`,
+      decodedPrivateKey,
+      `\n\n${t("pkiBackup.publicKey")}\n`,
+      decodedPublicKey,
+      `\n\n${t("pkiBackup.footer")}`,
+    ].join("");
+
+    const blob = new Blob([formattedContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = t("pkiBackup.fileName", {
+      shortName: getMyNode()?.user?.shortName ?? t("unknown.shortName"),
+      longName: getMyNode()?.user?.longName ?? t("unknown.longName"),
+    });
+
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    closeDialog();
+    URL.revokeObjectURL(url);
+  }, [decodeKeyData, privateKey, publicKey, closeDialog, t]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("pkiBackup.title")}</DialogTitle>
+          <DialogDescription>
+            {t("pkiBackup.secureBackup")}
+          </DialogDescription>
+          <DialogDescription>
+            <span className="font-bold break-before-auto">
+              {t("pkiBackup.loseKeysWarning")}
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-6">
+          <Button
+            variant="default"
+            name="download"
+            onClick={() => createDownloadKeyFile()}
+            className=""
+          >
+            <DownloadIcon size={20} className="mr-2" />
+            {t("button.download")}
+          </Button>
+          <Button variant="default" onClick={() => renderPrintWindow()}>
+            <PrinterIcon size={20} className="mr-2" />
+            {t("button.print")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/PkiRegenerateDialog.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { useTranslation } from "react-i18next";
+
+export interface PkiRegenerateDialogProps {
+  text: {
+    title: string;
+    description: string;
+    button: string;
+  };
+  open: boolean;
+  onOpenChange: () => void;
+  onSubmit: () => void;
+}
+
+export const PkiRegenerateDialog = ({
+  text = {
+    title: "",
+    description: "",
+    button: "",
+  },
+  open,
+  onOpenChange,
+  onSubmit,
+}: PkiRegenerateDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const dialogText = {
+    title: text.title || t("pkiRegenerate.title"),
+    description: text.description ||
+      t("pkiRegenerate.description"),
+    button: text.button || t("button.regenerate"),
+  };
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{dialogText.title}</DialogTitle>
+          <DialogDescription>
+            {dialogText.description}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="destructive"
+            name="regenerate"
+            onClick={() => onSubmit()}
+          >
+            {dialogText.button}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/QRDialog.tsx

@@ -0,0 +1,151 @@
+import { create, toBinary } from "@bufbuild/protobuf";
+import { Checkbox } from "../UI/Checkbox/index.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { Protobuf, type Types } from "@meshtastic/core";
+import { fromByteArray } from "base64-js";
+import { useEffect, useMemo, useState } from "react";
+import { QRCode } from "react-qrcode-logo";
+import { useTranslation } from "react-i18next";
+
+export interface QRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  loraConfig?: Protobuf.Config.Config_LoRaConfig;
+  channels: Map<Types.ChannelNumber, Protobuf.Channel.Channel>;
+}
+
+export const QRDialog = ({
+  open,
+  onOpenChange,
+  loraConfig,
+  channels,
+}: QRDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
+  const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
+
+  const allChannels = useMemo(() => Array.from(channels.values()), [channels]);
+
+  useEffect(() => {
+    const channelsToEncode = allChannels
+      .filter((ch) => selectedChannels.includes(ch.index))
+      .map((channel) => channel.settings)
+      .filter((ch): ch is Protobuf.Channel.ChannelSettings => !!ch);
+    const encoded = create(
+      Protobuf.AppOnly.ChannelSetSchema,
+      create(Protobuf.AppOnly.ChannelSetSchema, {
+        loraConfig,
+        settings: channelsToEncode,
+      }),
+    );
+    const base64 = fromByteArray(
+      toBinary(Protobuf.AppOnly.ChannelSetSchema, encoded),
+    )
+      .replace(/=/g, "")
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_");
+
+    setQrCodeUrl(
+      `https://meshtastic.org/e/${qrCodeAdd ? "?add=true" : ""}#${base64}`,
+    );
+  }, [allChannels, selectedChannels, qrCodeAdd, loraConfig]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("qr.title")}</DialogTitle>
+          <DialogDescription>
+            {t("qr.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="flex gap-3 px-4 py-5 sm:p-6">
+            <div className="flex w-40 flex-col gap-2">
+              {allChannels.map((channel) => (
+                <div className="flex justify-between" key={channel.index}>
+                  <Label>
+                    {channel.settings?.name.length
+                      ? channel.settings.name
+                      : channel.role === Protobuf.Channel.Channel_Role.PRIMARY
+                      ? t("page.broadcastLabel", { ns: "channels" })
+                      : `${
+                        t("page.channelIndex", {
+                          ns: "channels",
+                          index: channel.index,
+                        })
+                      }${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>
+              ))}
+            </div>
+            <QRCode value={qrCodeUrl} size={200} qrStyle="dots" />
+          </div>
+          <div className="flex justify-center">
+            <button
+              type="button"
+              className={`border-slate-900 border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
+                qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
+              name="addChannels"
+              onClick={() => setQrCodeAdd(true)}
+            >
+              {t("qr.addChannels")}
+            </button>
+            <button
+              type="button"
+              className={`border-slate-900 border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
+                !qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
+              name="replaceChannels"
+              onClick={() => setQrCodeAdd(false)}
+            >
+              {t("qr.replaceChannels")}
+            </button>
+          </div>
+        </div>
+        <DialogFooter>
+          <Label>{t("qr.sharableUrl")}</Label>
+          <Input
+            value={qrCodeUrl}
+            disabled
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/RebootDialog.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { RefreshCwIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+export interface RebootDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const RebootDialog = ({
+  open,
+  onOpenChange,
+}: RebootDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { connection } = useDevice();
+
+  const [time, setTime] = useState<number>(5);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("reboot.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("reboot.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex gap-2 p-4">
+          <Input
+            type="number"
+            className="dark:text-slate-900"
+            value={time}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
+          />
+          <Button
+            className="w-24"
+            name="now"
+            onClick={() => {
+              connection?.reboot(2).then(() => onOpenChange(false));
+            }}
+          >
+            <RefreshCwIcon className="mr-2" size={16} />
+            {t("button.now")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/RebootOTADialog.test.tsx

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { RebootOTADialog } from "./RebootOTADialog.tsx";
+import {
+  ButtonHTMLAttributes,
+  ClassAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+} from "react";
+import { JSX } from "react/jsx-runtime";
+
+const rebootOtaMock = vi.fn();
+let mockConnection: { rebootOta: (delay: number) => void } | undefined = {
+  rebootOta: rebootOtaMock,
+};
+
+vi.mock("@core/stores/deviceStore.ts", () => ({
+  useDevice: () => ({
+    connection: mockConnection,
+  }),
+}));
+
+vi.mock("@components/UI/Button.tsx", async () => {
+  const actual = await vi.importActual("@components/UI/Button.tsx");
+  return {
+    ...actual,
+    Button: (
+      props:
+        & JSX.IntrinsicAttributes
+        & ClassAttributes<HTMLButtonElement>
+        & ButtonHTMLAttributes<HTMLButtonElement>,
+    ) => <button {...props} />,
+  };
+});
+
+vi.mock("@components/UI/Input.tsx", async () => {
+  const actual = await vi.importActual("@components/UI/Input.tsx");
+  return {
+    ...actual,
+    Input: (
+      props:
+        & JSX.IntrinsicAttributes
+        & ClassAttributes<HTMLInputElement>
+        & InputHTMLAttributes<HTMLInputElement>,
+    ) => <input {...props} />,
+  };
+});
+
+vi.mock("@components/UI/Dialog.tsx", () => {
+  return {
+    Dialog: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    DialogContent: ({ children }: { children: ReactNode }) => (
+      <div>{children}</div>
+    ),
+    DialogHeader: ({ children }: { children: ReactNode }) => (
+      <div>{children}</div>
+    ),
+    DialogTitle: ({ children }: { children: ReactNode }) => <h1>{children}</h1>,
+    DialogDescription: ({ children }: { children: ReactNode }) => (
+      <p>{children}</p>
+    ),
+    DialogClose: () => null,
+  };
+});
+
+describe("RebootOTADialog", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    rebootOtaMock.mockClear();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders dialog with default input value", () => {
+    render(<RebootOTADialog open onOpenChange={() => {}} />);
+    expect(screen.getByPlaceholderText(/enter delay/i)).toHaveValue(5);
+    expect(screen.getByRole("heading", { name: /schedule reboot/i, level: 1 }))
+      .toBeInTheDocument();
+    expect(screen.getByText(/reboot to ota mode now/i)).toBeInTheDocument();
+  });
+
+  it("schedules a reboot with delay and calls rebootOta", async () => {
+    const onOpenChangeMock = vi.fn();
+    render(<RebootOTADialog open onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
+      target: { value: "3" },
+    });
+
+    fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+
+    expect(screen.getByText(/reboot has been scheduled/i)).toBeInTheDocument();
+
+    vi.advanceTimersByTime(3000);
+
+    await waitFor(() => {
+      expect(rebootOtaMock).toHaveBeenCalledWith(0);
+      expect(onOpenChangeMock).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it("triggers an instant reboot", async () => {
+    const onOpenChangeMock = vi.fn();
+    render(<RebootOTADialog open onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.click(screen.getByText(/reboot to ota mode now/i));
+
+    await waitFor(() => {
+      expect(rebootOtaMock).toHaveBeenCalledWith(5);
+      expect(onOpenChangeMock).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it("does not call reboot if connection is undefined", async () => {
+    const onOpenChangeMock = vi.fn();
+
+    mockConnection = undefined;
+
+    render(<RebootOTADialog open onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.click(screen.getByTestId("scheduleRebootBtn"));
+    vi.advanceTimersByTime(5000);
+
+    await waitFor(() => {
+      expect(rebootOtaMock).not.toHaveBeenCalled();
+      expect(onOpenChangeMock).not.toHaveBeenCalled();
+    });
+
+    mockConnection = { rebootOta: rebootOtaMock };
+  });
+});

packages/web/src/components/Dialog/RebootOTADialog.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { ClockIcon, RefreshCwIcon } from "lucide-react";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useTranslation } from "react-i18next";
+
+export interface RebootOTADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const DEFAULT_REBOOT_DELAY = 5; // seconds
+
+export const RebootOTADialog = (
+  { open, onOpenChange }: RebootOTADialogProps,
+) => {
+  const { t } = useTranslation("dialog");
+  const { connection } = useDevice();
+  const [time, setTime] = useState<number>(DEFAULT_REBOOT_DELAY);
+  const [isScheduled, setIsScheduled] = useState(false);
+  const [inputValue, setInputValue] = useState(DEFAULT_REBOOT_DELAY.toString());
+
+  const handleSetTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.validity.valid) {
+      e.preventDefault();
+      return;
+    }
+
+    const val = e.target.value;
+    setInputValue(val);
+
+    const parsed = Number(val);
+    if (!isNaN(parsed) && parsed > 0) {
+      setTime(parsed);
+    }
+  };
+
+  const handleRebootWithTimeout = async () => {
+    if (!connection) return;
+    setIsScheduled(true);
+
+    const delay = time > 0 ? time : DEFAULT_REBOOT_DELAY;
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, delay * 1000);
+    }).finally(() => {
+      setIsScheduled(false);
+      onOpenChange(false);
+      setInputValue(DEFAULT_REBOOT_DELAY.toString());
+    });
+    connection.rebootOta(0);
+  };
+
+  const handleInstantReboot = async () => {
+    if (!connection) return;
+
+    await connection.rebootOta(DEFAULT_REBOOT_DELAY);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("rebootOta.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("rebootOta.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-2 p-2 items-center relative">
+          <Input
+            type="number"
+            min={1}
+            max={86400}
+            className="dark:text-slate-900 appearance-none"
+            value={inputValue}
+            onChange={handleSetTime}
+            placeholder={t("rebootOta.enterDelay")}
+          />
+          <Button
+            onClick={() => handleRebootWithTimeout()}
+            data-testid="scheduleRebootBtn"
+            className="w-9/12"
+          >
+            <ClockIcon className="mr-2" size={18} />
+            {isScheduled ? t("rebootOta.scheduled") : t("rebootOta.title")}
+          </Button>
+        </div>
+
+        <Button
+          variant="destructive"
+          name="rebootNow"
+          onClick={() => handleInstantReboot()}
+        >
+          <RefreshCwIcon className="mr-2" size={16} />
+          {t("button.rebootOtaNow")}
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.test.tsx

@@ -0,0 +1,49 @@
+import { render } from "@testing-library/react";
+import { DeviceContext, useDeviceStore } from "@core/stores/deviceStore.ts";
+import { RefreshKeysDialog } from "./RefreshKeysDialog.tsx";
+import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
+import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+
+vi.mock("@core/stores/messageStore");
+vi.mock("./useRefreshKeysDialog");
+
+const mockUseMessageStore = vi.mocked(useMessageStore);
+const mockUseRefreshKeysDialog = vi.mocked(useRefreshKeysDialog);
+
+const getInitialState = () =>
+  useDeviceStore.getInitialState?.() ??
+    { devices: new Map(), remoteDevices: new Map() };
+
+beforeEach(() => {
+  useDeviceStore.setState(getInitialState(), true);
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+test("does not render dialog if no error exists for active chat", () => {
+  const deviceId = 1;
+  const activeChatNum = 54321;
+
+  useDeviceStore.getState().addDevice(deviceId);
+
+  const currentDeviceState = useDeviceStore.getState().getDevice(deviceId);
+  if (!currentDeviceState) throw new Error("Device not found");
+
+  mockUseMessageStore.mockReturnValue({ activeChat: activeChatNum });
+  mockUseRefreshKeysDialog.mockReturnValue({
+    handleCloseDialog: vi.fn(),
+    handleNodeRemove: vi.fn(),
+  });
+
+  const { container } = render(
+    <DeviceContext.Provider value={currentDeviceState}>
+      <RefreshKeysDialog open onOpenChange={vi.fn()} />
+    </DeviceContext.Provider>,
+  );
+
+  expect(container.firstChild).toBeNull();
+});

packages/web/src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx

@@ -0,0 +1,95 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { LockKeyholeOpenIcon } from "lucide-react";
+import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useTranslation } from "react-i18next";
+import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
+
+export interface RefreshKeysDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const RefreshKeysDialog = (
+  { open, onOpenChange }: RefreshKeysDialogProps,
+) => {
+  const { t } = useTranslation("dialog");
+  const { activeChat } = useMessageStore();
+  const { nodeErrors, getNode } = useDevice();
+  const { handleCloseDialog, handleNodeRemove } = useRefreshKeysDialog();
+
+  const nodeErrorNum = nodeErrors.get(activeChat);
+
+  if (!nodeErrorNum) {
+    return null;
+  }
+
+  const nodeWithError = getNode(nodeErrorNum.node);
+
+  const text = {
+    title: t("refreshKeys.title", {
+      identifier: nodeWithError?.user?.longName ?? "",
+    }),
+    description: `${t("refreshKeys.description.unableToSendDmPrefix")}${
+      nodeWithError?.user?.longName ?? ""
+    } (${nodeWithError?.user?.shortName ?? ""})${
+      t("refreshKeys.description.keyMismatchReasonSuffix")
+    }`,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-8 flex flex-col gap-2"
+        aria-describedby={undefined}
+      >
+        <DialogClose onClick={handleCloseDialog} />
+        <DialogHeader>
+          <DialogTitle>{text.title}</DialogTitle>
+        </DialogHeader>
+        {text.description}
+        <ul className="mt-2">
+          <li className="flex place-items-center gap-2 items-start">
+            <div className="p-2 bg-slate-500 rounded-lg mt-1">
+              <LockKeyholeOpenIcon
+                size={30}
+                className="text-white justify-center"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <div>
+                <p className="font-bold mb-0.5">
+                  {t("refreshKeys.label.acceptNewKeys")}
+                </p>
+                <p>
+                  {t("refreshKeys.description.acceptNewKeys")}
+                </p>
+              </div>
+              <Button
+                variant="default"
+                name="requestNewKeys"
+                onClick={handleNodeRemove}
+              >
+                {t("button.requestNewKeys")}
+              </Button>
+              <Button
+                variant="outline"
+                name="dismiss"
+                onClick={handleCloseDialog}
+              >
+                {t("button.dismiss")}
+              </Button>
+            </div>
+          </li>
+        </ul>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.ts

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useMessageStore } from "@core/stores/messageStore/index.ts";
+
+export function useRefreshKeysDialog() {
+  const { removeNode, setDialogOpen, clearNodeError, getNodeError } =
+    useDevice();
+  const { activeChat } = useMessageStore();
+
+  const handleCloseDialog = useCallback(() => {
+    setDialogOpen("refreshKeys", false);
+  }, [setDialogOpen]);
+
+  const handleNodeRemove = useCallback(() => {
+    const nodeWithError = getNodeError(activeChat);
+    if (!nodeWithError) {
+      return;
+    }
+    clearNodeError(activeChat);
+    handleCloseDialog();
+    return removeNode(nodeWithError?.node);
+  }, [activeChat, clearNodeError, getNodeError, removeNode, handleCloseDialog]);
+
+  return {
+    handleCloseDialog,
+    handleNodeRemove,
+  };
+}

packages/web/src/components/Dialog/RemoveNodeDialog.tsx

@@ -0,0 +1,62 @@
+import { useAppStore } from "../../core/stores/appStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { useTranslation } from "react-i18next";
+
+export interface RemoveNodeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const RemoveNodeDialog = ({
+  open,
+  onOpenChange,
+}: RemoveNodeDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { connection, getNode, removeNode } = useDevice();
+  const { nodeNumToBeRemoved } = useAppStore();
+
+  const onSubmit = () => {
+    connection?.removeNodeByNum(nodeNumToBeRemoved);
+    removeNode(nodeNumToBeRemoved);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>{t("removeNode.title")}</DialogTitle>
+          <DialogDescription>
+            {t("removeNode.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="gap-4">
+          <form onSubmit={onSubmit}>
+            <Label>{getNode(nodeNumToBeRemoved)?.user?.longName}</Label>
+          </form>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="destructive"
+            name="remove"
+            onClick={() => onSubmit()}
+          >
+            {t("button.remove")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/ShutdownDialog.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { ClockIcon, PowerIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+export interface ShutdownDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ShutdownDialog = ({
+  open,
+  onOpenChange,
+}: ShutdownDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { connection } = useDevice();
+
+  const [time, setTime] = useState<number>(5);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("shutdown.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("shutdown.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-2 p-4">
+          <Input
+            type="number"
+            value={time}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
+            suffix={t("unit.minute.plural")}
+          />
+          <Button
+            className="w-24"
+            onClick={() => {
+              connection?.shutdown(time * 60).then(() => onOpenChange(false));
+            }}
+          >
+            <ClockIcon size={16} />
+          </Button>
+          <Button
+            className="w-24"
+            name="now"
+            onClick={() => {
+              connection?.shutdown(2).then(() => () => onOpenChange(false));
+            }}
+          >
+            <PowerIcon className="mr-2" size={16} />
+            {t("button.now")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/TracerouteResponseDialog.tsx

@@ -0,0 +1,71 @@
+import { useDevice } from "@core/stores/deviceStore.ts";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../UI/Dialog.tsx";
+import type { Protobuf, Types } from "@meshtastic/core";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+
+import { TraceRoute } from "../PageComponents/Messages/TraceRoute.tsx";
+import { useTranslation } from "react-i18next";
+
+export interface TracerouteResponseDialogProps {
+  traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery> | undefined;
+  open: boolean;
+  onOpenChange: () => void;
+}
+
+export const TracerouteResponseDialog = ({
+  traceroute,
+  open,
+  onOpenChange,
+}: TracerouteResponseDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { getNode } = useDevice();
+  const route: number[] = traceroute?.data.route ?? [];
+  const routeBack: number[] = traceroute?.data.routeBack ?? [];
+  const snrTowards = (traceroute?.data.snrTowards ?? []).map((snr) => snr / 4);
+  const snrBack = (traceroute?.data.snrBack ?? []).map((snr) => snr / 4);
+  const from = getNode(traceroute?.from ?? 0);
+  const fromLongName = from?.user?.longName ??
+    (from ? `!${numberToHexUnpadded(from?.num)}` : t("unknown.shortName"));
+  const fromShortName = from?.user?.shortName ??
+    (from
+      ? `${numberToHexUnpadded(from?.num).substring(0, 4)}`
+      : t("unknown.shortName"));
+
+  const toUser = getNode(traceroute?.to ?? 0);
+
+  if (!toUser || !from) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>
+            {t("tracerouteResponse.title", {
+              identifier: `${fromLongName} (${fromShortName})`,
+            })}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          <TraceRoute
+            route={route}
+            routeBack={routeBack}
+            from={{ user: from.user }}
+            to={{ user: toUser.user }}
+            snrTowards={snrTowards}
+            snrBack={snrBack}
+          />
+        </DialogDescription>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx

@@ -0,0 +1,91 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Link } from "@components/UI/Typography/Link.tsx";
+import { Checkbox } from "@components/UI/Checkbox/index.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useState } from "react";
+import { eventBus } from "@core/utils/eventBus.ts";
+import { useTranslation } from "react-i18next";
+
+export interface RouterRoleDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const UnsafeRolesDialog = (
+  { open, onOpenChange }: RouterRoleDialogProps,
+) => {
+  const { t } = useTranslation("dialog");
+  const [confirmState, setConfirmState] = useState(false);
+  const { setDialogOpen } = useDevice();
+
+  const deviceRoleLink =
+    "https://meshtastic.org/docs/configuration/radio/device/";
+  const choosingTheRightDeviceRoleLink =
+    "https://meshtastic.org/blog/choosing-the-right-device-role/";
+
+  const handleCloseDialog = (action: "confirm" | "dismiss") => {
+    setDialogOpen("unsafeRoles", false);
+    setConfirmState(false);
+    eventBus.emit("dialog:unsafeRoles", { action });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-8 flex flex-col">
+        <DialogClose onClick={() => handleCloseDialog("dismiss")} />
+        <DialogHeader>
+          <DialogTitle>{t("unsafeRoles.title")}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="text-md">
+          {t("unsafeRoles.preamble")}
+          <Link href={deviceRoleLink} className="">
+            {t("unsafeRoles.deviceRoleDocumentation")}
+          </Link>
+          {t("unsafeRoles.conjunction")}
+          <Link href={choosingTheRightDeviceRoleLink}>
+            {t("unsafeRoles.choosingRightDeviceRole")}
+          </Link>
+          {t("unsafeRoles.postamble")}
+        </DialogDescription>
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="routerRole"
+            checked={confirmState}
+            onChange={() => setConfirmState(!confirmState)}
+            name="confirmUnderstanding"
+          >
+            <span className="dark:text-white">
+              {t("unsafeRoles.confirmUnderstanding")}
+            </span>
+          </Checkbox>
+        </div>
+        <DialogFooter className="mt-6">
+          <Button
+            variant="default"
+            name="dismiss"
+            onClick={() => handleCloseDialog("dismiss")}
+          >
+            {t("button.dismiss")}
+          </Button>
+          <Button
+            variant="default"
+            name="confirm"
+            disabled={!confirmState}
+            onClick={() => handleCloseDialog("confirm")}
+          >
+            {t("button.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/web/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx

@@ -0,0 +1,171 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type Mock,
+  vi,
+} from "vitest";
+import { renderHook } from "@testing-library/react";
+import {
+  UNSAFE_ROLES,
+  useUnsafeRolesDialog,
+} from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
+import { eventBus } from "@core/utils/eventBus.ts";
+
+const mockNavigate = vi.fn();
+vi.mock("@tanstack/react-router", async (importOriginal) => {
+  const actual = await importOriginal<
+    typeof import("@tanstack/react-router")
+  >();
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+vi.mock("@core/utils/eventBus", () => ({
+  eventBus: {
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+  },
+}));
+
+const mockDevice = {
+  setDialogOpen: vi.fn(),
+};
+
+vi.mock("@core/stores/deviceStore", () => ({
+  useDevice: () => ({
+    setDialogOpen: mockDevice.setDialogOpen,
+  }),
+}));
+
+describe("useUnsafeRolesDialog", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    mockNavigate.mockClear();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderUnsafeRolesHook = () => {
+    return renderHook(() => useUnsafeRolesDialog());
+  };
+
+  describe("handleCloseDialog", () => {
+    it("should call setDialogOpen with correct parameters when dialog is closed", () => {
+      const { result } = renderUnsafeRolesHook();
+
+      result.current.handleCloseDialog();
+
+      expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
+        "unsafeRoles",
+        false,
+      );
+    });
+  });
+
+  describe("validateRoleSelection", () => {
+    it("should resolve with true for safe roles without opening dialog", async () => {
+      const { result } = renderUnsafeRolesHook();
+      const safeRole = "SAFE_ROLE";
+
+      const validationResult = await result.current.validateRoleSelection(
+        safeRole,
+      );
+
+      expect(validationResult).toBe(true);
+      expect(mockDevice.setDialogOpen).not.toHaveBeenCalled();
+    });
+
+    it("should open dialog for unsafe roles and resolve with true when confirmed", async () => {
+      const { result } = renderUnsafeRolesHook();
+
+      const validationPromise = result.current.validateRoleSelection(
+        UNSAFE_ROLES[0],
+      );
+
+      expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
+        "unsafeRoles",
+        true,
+      );
+      expect(eventBus.on).toHaveBeenCalledWith(
+        "dialog:unsafeRoles",
+        expect.any(Function),
+      );
+
+      const onHandler = (eventBus.on as Mock).mock.calls[0][1];
+      onHandler({ action: "confirm" });
+      const validationResult = await validationPromise;
+
+      expect(validationResult).toBe(true);
+      expect(eventBus.off).toHaveBeenCalledWith(
+        "dialog:unsafeRoles",
+        onHandler,
+      );
+    });
+
+    it("should resolve with false when user dismisses the dialog", async () => {
+      const { result } = renderUnsafeRolesHook();
+      const validationPromise = result.current.validateRoleSelection(
+        UNSAFE_ROLES[0],
+      );
+      const onHandler = (eventBus.on as Mock).mock.calls[0][1];
+      onHandler({ action: "dismiss" });
+
+      const validationResult = await validationPromise;
+      expect(validationResult).toBe(false);
+      expect(eventBus.off).toHaveBeenCalledWith(
+        "dialog:unsafeRoles",
+        onHandler,
+      );
+    });
+
+    it("should clean up event listener after response", async () => {
+      const { result } = renderUnsafeRolesHook();
+
+      const validationPromise = result.current.validateRoleSelection(
+        UNSAFE_ROLES[1],
+      );
+      const onHandler = (eventBus.on as Mock).mock.calls[0][1];
+
+      onHandler({ action: "confirm" });
+      await validationPromise;
+
+      expect(eventBus.off).toHaveBeenCalledWith(
+        "dialog:unsafeRoles",
+        onHandler,
+      );
+    });
+  });
+
+  it("should work with all unsafe roles", async () => {
+    const { result } = renderUnsafeRolesHook();
+
+    for (const unsafeRole of UNSAFE_ROLES) {
+      mockDevice.setDialogOpen.mockClear();
+      (eventBus.on as Mock).mockClear();
+
+      const validationPromise = result.current.validateRoleSelection(
+        unsafeRole,
+      );
+
+      expect(mockDevice.setDialogOpen).toHaveBeenCalledWith(
+        "unsafeRoles",
+        true,
+      );
+
+      const onHandler = (eventBus.on as Mock).mock.calls[0][1];
+      onHandler({ action: "confirm" });
+
+      const validationResult = await validationPromise;
+
+      expect(validationResult).toBe(true);
+    }
+  });
+});

packages/web/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { eventBus } from "@core/utils/eventBus.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
+
+export const UNSAFE_ROLES = ["ROUTER", "ROUTER_LATE", "REPEATER"];
+export type UnsafeRole = typeof UNSAFE_ROLES[number];
+
+export const useUnsafeRolesDialog = () => {
+  const { setDialogOpen } = useDevice();
+
+  const handleCloseDialog = useCallback(() => {
+    setDialogOpen("unsafeRoles", false);
+  }, [setDialogOpen]);
+
+  const validateRoleSelection = useCallback(
+    (newRoleKey: string): Promise<boolean> => {
+      if (!UNSAFE_ROLES.includes(newRoleKey as UnsafeRole)) {
+        return Promise.resolve(true);
+      }
+
+      setDialogOpen("unsafeRoles", true);
+
+      return new Promise((resolve) => {
+        const handleResponse = (
+          { action }: { action: "confirm" | "dismiss" },
+        ) => {
+          eventBus.off("dialog:unsafeRoles", handleResponse);
+          resolve(action === "confirm");
+        };
+
+        eventBus.on("dialog:unsafeRoles", handleResponse);
+      });
+    },
+    [setDialogOpen],
+  );
+
+  return {
+    handleCloseDialog,
+    validateRoleSelection,
+  };
+};