Persistent connection dialog

.gitignore

@@ -5,6 +5,5 @@ stats.html
 .vite
 dev-dist
 __screenshots__*
-*.diff
 npm/
-
+*.diff

deno.json

@@ -47,4 +47,5 @@
     "out",
     ".vscode-test"
   ]
+
 }

packages/web/public/i18n/locales/en/dialog.json

@@ -79,6 +79,46 @@
       "requiresFeatures": "This connection type requires <0></0>. Please use a supported browser, like Chrome or Edge.",
       "requiresSecureContext": "This application requires a <0>secure context</0>. Please connect using HTTPS or localhost.",
       "additionallyRequiresSecureContext": "Additionally, it requires a <0>secure context</0>. Please connect using HTTPS or localhost."
+    },
+    "tabs": {
+      "http": {
+        "title": "HTTP Servers",
+        "clearAll": "Clear All",
+        "noServers": "No HTTP servers added yet",
+        "addFirstServer": "Add your first Meshtastic server to get started",
+        "addNewDevice": "Add New Device",
+        "addServer": "Add HTTP Server",
+        "editServer": "Edit HTTP Server"
+      },
+      "serial": {
+        "title": "Serial Devices",
+        "adding": "Adding...",
+        "addDevice": "Add Serial Device",
+        "noDevices": "No serial devices connected",
+        "connectFirst": "Connect your first Meshtastic device via USB"
+      },
+      "bluetooth": {
+        "title": "Bluetooth Devices",
+        "pairing": "Pairing...",
+        "pairDevice": "Pair New Device",
+        "noDevices": "No Bluetooth devices paired",
+        "pairFirst": "Pair your first Meshtastic device"
+      },
+      "status": {
+        "online": "Online",
+        "offline": "Offline",
+        "checking": "Checking...",
+        "connecting": "Connecting...",
+        "connected": "Connected",
+        "available": "Available",
+        "paired": "Paired",
+        "unknown": "Unknown"
+      },
+      "actions": {
+        "connect": "Connect",
+        "cancel": "Cancel",
+        "saveChanges": "Save Changes"
+      }
     }
   },
   "nodeDetails": {

packages/web/src/App.tsx

@@ -1,6 +1,5 @@
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
 import { DialogManager } from "@components/Dialog/DialogManager.tsx";
-import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
 import { KeyBackupReminder } from "@components/KeyBackupReminder.tsx";
 import { Toaster } from "@components/Toaster.tsx";
 import Footer from "@components/UI/Footer.tsx";
@@ -13,27 +12,30 @@ import { MapProvider } from "react-map-gl/maplibre";
 import { CommandPalette } from "@components/CommandPalette/index.tsx";
 import { SidebarProvider } from "@core/stores/sidebarStore.tsx";
 import { useTheme } from "@core/hooks/useTheme.ts";
-import { Outlet } from "@tanstack/react-router";
+import { Outlet, useLocation, useNavigate } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { useEffect } from "react";
 
 export function App() {
   const { getDevice } = useDeviceStore();
-  const { selectedDevice, setConnectDialogOpen, connectDialogOpen } =
-    useAppStore();
+  const { selectedDevice } = useAppStore();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   const device = getDevice(selectedDevice);
 
   // Sets up light/dark mode based on user preferences or system settings
   useTheme();
 
+  // Redirect to messages when a device connects and we're on the dashboard
+  useEffect(() => {
+    if (device && location.pathname === "/") {
+      navigate({ to: "/messages/broadcast/0", replace: true });
+    }
+  }, [device, location.pathname, navigate]);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorPage}>
-      <NewDeviceDialog
-        open={connectDialogOpen}
-        onOpenChange={(open) => {
-          setConnectDialogOpen(open);
-        }}
-      />
       <Toaster />
       <TanStackRouterDevtools position="bottom-right" />
       <DeviceWrapper device={device}>

packages/web/src/components/ConnectionTabs/ConnectionTabs.tsx

@@ -0,0 +1,61 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@components/UI/Tabs.tsx";
+import { HTTPTab } from "@components/PageComponents/Connect/Tabs/HTTPTab.tsx";
+import { BluetoothTab } from "@components/PageComponents/Connect/Tabs/BluetoothTab.tsx";
+import { SerialTab } from "@components/PageComponents/Connect/Tabs/SerialTab.tsx";
+import { Bluetooth, Server, Usb } from "lucide-react";
+
+interface ConnectionTabsProps {
+  closeDialog?: () => void;
+  className?: string;
+}
+
+export const ConnectionTabs = (
+  { closeDialog, className }: ConnectionTabsProps,
+) => {
+  const handleClose = () => {
+    if (closeDialog) {
+      closeDialog();
+    }
+  };
+
+  return (
+    <Tabs
+      defaultValue="http"
+      className={`w-full max-w-2xl mx-auto ${className || ""}`}
+    >
+      <TabsList className="grid w-full grid-cols-3 mb-4">
+        <TabsTrigger value="http" className="flex items-center gap-2">
+          <Server className="h-5 w-5" />
+          HTTP
+        </TabsTrigger>
+        <TabsTrigger value="bluetooth" className="flex items-center gap-2">
+          <Bluetooth className="h-5 w-5" />
+          Bluetooth
+        </TabsTrigger>
+        <TabsTrigger value="serial" className="flex items-center gap-2">
+          <Usb className="h-5 w-5" />
+          Serial
+        </TabsTrigger>
+      </TabsList>
+
+      <div className="min-h-[400px] max-h-[500px] overflow-y-auto">
+        <TabsContent value="http" className="mt-0">
+          <HTTPTab closeDialog={handleClose} />
+        </TabsContent>
+
+        <TabsContent value="bluetooth" className="mt-0">
+          <BluetoothTab closeDialog={handleClose} />
+        </TabsContent>
+
+        <TabsContent value="serial" className="mt-0">
+          <SerialTab closeDialog={handleClose} />
+        </TabsContent>
+      </div>
+    </Tabs>
+  );
+};