feat: added are you sure dialog

src/components/Dialog/DialogManager.tsx

@@ -1,13 +1,13 @@
+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 "./PKIBackupDialog.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 { useDevice } from "@core/stores/deviceStore.ts";
-
-import { NodeDetailsDialog } from "./NodeDetailsDialog.tsx";
+import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog.tsx";
+import { UnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx";
 
 export const DialogManager = () => {
   const { channels, config, dialog, setDialogOpen } = useDevice();
@@ -64,6 +64,12 @@ export const DialogManager = () => {
           setDialogOpen("nodeDetails", open);
         }}
       />
+      <UnsafeRolesDialog
+        open={dialog.unsafeRoles}
+        onOpenChange={(open) => {
+          setDialogOpen("unsafeRoles", open);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/ImportDialog.tsx

@@ -1,6 +1,6 @@
 import { create, fromBinary } from "@bufbuild/protobuf";
 import { Button } from "@components/UI/Button.tsx";
-import { Checkbox } from "@components/UI/Checkbox.tsx";
+import { Checkbox } from "../UI/Checkbox/index.tsx";
 import {
   Dialog,
   DialogContent,
@@ -50,7 +50,7 @@ export const ImportDialog = ({
       const paddedString = encodedChannelConfig
         .padEnd(
           encodedChannelConfig.length +
-            ((4 - (encodedChannelConfig.length % 4)) % 4),
+          ((4 - (encodedChannelConfig.length % 4)) % 4),
           "=",
         )
         .replace(/-/g, "+")

src/components/Dialog/QRDialog.tsx

@@ -1,5 +1,5 @@
 import { create, toBinary } from "@bufbuild/protobuf";
-import { Checkbox } from "@components/UI/Checkbox.tsx";
+import { Checkbox } from "../UI/Checkbox/index.tsx";
 import {
   Dialog,
   DialogContent,
@@ -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}
@@ -106,22 +106,20 @@ export const QRDialog = ({
           <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
+              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"
-              }`}
+                }`}
               onClick={() => setQrCodeAdd(true)}
             >
               Add Channels
             </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
+              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"
-              }`}
+                }`}
               onClick={() => setQrCodeAdd(false)}
             >
               Replace Channels

src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx

@@ -0,0 +1,51 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Link } from "@components/UI/Typography/Link.tsx";
+import { Checkbox } from "../../UI/Checkbox/index.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { useUnsafeRoles } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRoles.ts";
+
+export interface RouterRoleDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const UnsafeRolesDialog = ({ open, onOpenChange }: RouterRoleDialogProps) => {
+  const { getConfirmState, toggleConfirmState, handleCloseDialog } = useUnsafeRoles();
+
+  const deivceRoleLink = "https://meshtastic.org/docs/configuration/radio/device/";
+  const choosingTheRightDeviceRoleLink = "https://meshtastic.org/blog/choosing-the-right-device-role/";
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-8 flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="text-md">
+          I have read the <Link href={deivceRoleLink} className="">Device Role Documentation</Link>{" "}
+          and the blog post about <Link href={choosingTheRightDeviceRoleLink}>Choosing The Right Device Role</Link> and understand the implications of changing the role.
+        </DialogDescription>
+        <div className="flex items-center gap-2">
+          <Checkbox id="routerRole" checked={getConfirmState()} onChange={toggleConfirmState}>
+            Yes, I know what I'm doing
+          </Checkbox>
+        </div>
+        <DialogFooter className="mt-6">
+          <Button variant="default" name="dismiss" onClick={() => handleCloseDialog("dismiss")}>
+            Dismiss
+          </Button>
+          <Button variant="default" name="confirm" disabled={!getConfirmState()} onClick={() => handleCloseDialog("confirm")}>
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/Dialog/UnsafeRolesDialog/useUnsafeRoles.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback } from "react";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import useLocalStorage from "@core/hooks/useLocalStorage.ts";
+
+export const useUnsafeRoles = () => {
+  const [agreedToUnSafeRoles, setAgreedToUnsafeRoles] = useLocalStorage("agreeToUnsafeRole", false);
+  const [_confirmState, _setConfirmState] = useState(false);
+  const { setDialogOpen } = useDevice();
+
+  const toggleConfirmState = useCallback(() => {
+    setConfirmState(!_confirmState);
+  }, [_confirmState]);
+
+  const setConfirmState = useCallback((state: boolean) => {
+    _setConfirmState(state);
+  }, [_setConfirmState]);
+
+  const getConfirmState = useCallback(() => {
+    return _confirmState;
+  }, [_confirmState]);
+
+  const handleCloseDialog = useCallback((closeState: "dismiss" | "confirm") => {
+    if (closeState === "dismiss") {
+      setAgreedToUnsafeRoles(false);
+      setConfirmState(false);
+    }
+    if (closeState === "confirm") {
+      setAgreedToUnsafeRoles(true);
+      setConfirmState(false);
+    }
+    setDialogOpen("unsafeRoles", false);
+  }, [setDialogOpen, setAgreedToUnsafeRoles]);
+
+  return {
+    getConfirmState,
+    toggleConfirmState,
+    handleCloseDialog,
+    agreedToUnSafeRoles
+  };
+};