added toggle to edit query string

src/components/Dialog/QRDialog.tsx

@@ -12,7 +12,7 @@ import { Input } from "@components/UI/Input.js";
 import { Label } from "@components/UI/Label.js";
 import { Protobuf, Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
-import { ClipboardIcon, ReplaceIcon } from "lucide-react";
+import { ClipboardIcon, PlusIcon, ReplaceIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { QRCode } from "react-qrcode-logo";
 import { DynamicForm } from "../Form/DynamicForm";
@@ -36,17 +36,10 @@ export const QRDialog = ({
 }: QRDialogProps): JSX.Element => {
   const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
+  const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
 
   const allChannels = Array.from(channels.values());
 
-  const { register, handleSubmit, control } = useForm<{
-    replace: boolean;
-  }>({
-    defaultValues: {
-      replace: true,
-    },
-  });
-
   useEffect(() => {
     const channelsToEncode = allChannels
       .filter((ch) => selectedChannels.includes(ch.index))
@@ -63,8 +56,9 @@ export const QRDialog = ({
       .replace(/\+/g, "-")
       .replace(/\//g, "_");
 
-    setQrCodeUrl(`https://meshtastic.org/e/#${base64}`);
-  }, [channels, selectedChannels, loraConfig]);
+    console.log("here ran");
+    setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
+  }, [channels, selectedChannels, qrCodeAdd, loraConfig]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -110,11 +104,17 @@ export const QRDialog = ({
           </div>
           <div className="flex justify-center">
             <button
-              type="button" className="border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4">
+              type="button" 
+              className={ qrCodeAdd ? "border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4" : "border-black border-t border-l border-b rounded-l px-7 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-green-600 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4" }
+              onClick={() => setQrCodeAdd(true)}
+              >
                 Add Channels
             </button>
             <button
-              type="button" className="border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-slate-400 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4">
+              type="button" 
+              className={ !qrCodeAdd ? "border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-800 focus:ring-offset-2 dark:hover:bg-green-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-green-800 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-green-800 bg-green-800 text-white hover:bg-green-800 dark:bg-slate-50 dark:text-green-800 h-10 py-2 px-4" : "border-black border-t border-r border-b rounded-r text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-400 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-400 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-400 bg-slate-400 text-white hover:bg-green-600 dark:bg-slate-50 dark:text-slate-400 h-10 py-2 px-4" }
+              onClick={() => setQrCodeAdd(false)}
+              >
                 Replace Channels
             </button>
           </div>