Add command palette & cleanup

src/pages/Channels.tsx

@@ -1,17 +1,14 @@
 import type React from "react";
-import { useState } from "react";
 
 import { Channel } from "@app/components/PageComponents/Channel.js";
 import { Button } from "@components/Button.js";
-import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 import { useDevice } from "@core/providers/useDevice.js";
 import { QrCodeIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const ChannelsPage = (): JSX.Element => {
-  const { channels, config } = useDevice();
-  const [QRDialogOpen, setQRDialogOpen] = useState(false);
+  const { channels, setQRDialogOpen } = useDevice();
 
   const tabs: TabType[] = channels.map((channel) => {
     return {
@@ -25,31 +22,21 @@ export const ChannelsPage = (): JSX.Element => {
   });
 
   return (
-    <>
-      <QRDialog
-        isOpen={QRDialogOpen}
-        close={() => {
-          setQRDialogOpen(false);
-        }}
-        channels={channels.map((ch) => ch.config)}
-        loraConfig={config.lora}
-      />
-      <TabbedContent
-        tabs={tabs}
-        actions={[
-          () => (
-            <Button
-              variant="secondary"
-              iconBefore={<QrCodeIcon className="w-4" />}
-              onClick={() => {
-                setQRDialogOpen(true);
-              }}
-            >
-              QR Code
-            </Button>
-          ),
-        ]}
-      />
-    </>
+    <TabbedContent
+      tabs={tabs}
+      actions={[
+        () => (
+          <Button
+            variant="secondary"
+            iconBefore={<QrCodeIcon className="w-4" />}
+            onClick={() => {
+              setQRDialogOpen(true);
+            }}
+          >
+            QR Code
+          </Button>
+        ),
+      ]}
+    />
   );
 };