fix(connections): allow toggling HTTPS off in Add Connection dialog

The 'Use HTTPS' switch was disabled whenever the web client itself was
served over HTTPS, making it impossible to add a plain-HTTP node.
Keep the switch always interactive and instead show a mixed-content
warning when HTTP is selected on an HTTPS-served page.

Adds unit tests for the protocol toggle.

.github/workflows/release-web.yml

@@ -119,7 +119,7 @@ jobs:
         uses: docker/setup-buildx-action@v4
 
       - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v4.5.2
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

apps/web/package.json

@@ -80,7 +80,7 @@
     "immer": "^11.1.15",
     "js-cookie": "^3.0.8",
     "lucide-react": "^1.28.0",
-    "maplibre-gl": "6.0.0",
+    "maplibre-gl": "6.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-error-boundary": "^6.1.2",
@@ -99,7 +99,7 @@
     "@tanstack/router-plugin": "^1.168.22",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.4",
     "@types/chrome": "^0.2.2",
     "@types/geojson": "^7946.0.16",
     "@types/js-cookie": "^3.0.6",
@@ -112,7 +112,7 @@
     "autoprefixer": "^10.5.4",
     "gzipper": "^8.3.0",
     "happy-dom": "^20.11.1",
-    "oxfmt": "^0.61.0",
+    "oxfmt": "^0.63.0",
     "oxlint": "^1.75.0",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",

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

@@ -79,6 +79,7 @@
       "inputPlaceholder": "192.168.1.10 or meshtastic.local",
       "heading": "URL or IP",
       "useHttps": "Use HTTPS",
+      "mixedContentWarning": "This page is loaded over HTTPS. Your browser may block connections to an HTTP node.",
       "invalidUrl": {
         "title": "Invalid URL",
         "description": "Please enter a valid HTTP or HTTPS URL."

apps/web/src/components/Dialog/AddConnectionDialog/AddConnectionDialog.test.tsx

@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import AddConnectionDialog from "./AddConnectionDialog.tsx";
+
+vi.mock("@core/hooks/useToast.ts", () => ({
+  useToast: () => ({ toast: vi.fn() }),
+}));
+
+vi.mock("@app/pages/Connections/utils", () => ({
+  testHttpReachable: vi.fn(() => Promise.resolve(true)),
+}));
+
+const getSwitch = () => screen.getByRole("switch");
+
+describe("AddConnectionDialog HTTPS toggle", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("toggles between http and https when the app is served over http", () => {
+    render(<AddConnectionDialog open={true} isHTTPS={false} />);
+
+    const sw = getSwitch();
+    expect(sw).toHaveAttribute("aria-checked", "false");
+    expect(sw).toBeEnabled();
+
+    fireEvent.click(sw);
+    expect(sw).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(sw);
+    expect(sw).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("allows switching to http even when the app itself is served over https", () => {
+    render(<AddConnectionDialog open={true} isHTTPS={true} />);
+    const sw = getSwitch();
+    expect(sw).toHaveAttribute("aria-checked", "true");
+    expect(sw).toBeEnabled();
+
+    fireEvent.click(sw);
+    expect(sw).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("keeps the protocol in sync with the url input prefix", () => {
+    render(<AddConnectionDialog open={true} isHTTPS={false} />);
+
+    // prefix reflects the current protocol
+    expect(screen.getByText("http://")).toBeInTheDocument();
+
+    fireEvent.click(getSwitch());
+    expect(screen.getByText("https://")).toBeInTheDocument();
+  });
+});

apps/web/src/components/Dialog/AddConnectionDialog/AddConnectionDialog.tsx

@@ -275,7 +275,6 @@ export default function AddConnectionDialog({
     typeof navigator !== "undefined" && "bluetooth" in navigator;
   const serialSupported =
     typeof navigator !== "undefined" && "serial" in navigator;
-  const isURLHTTPS = isHTTPS;
 
   const reset = useCallback(() => {
     dispatch({ type: "RESET", payload: { isHTTPS } });
@@ -434,7 +433,6 @@ export default function AddConnectionDialog({
             <div className="flex items-center gap-2 mt-1">
               <Switch
                 value={state.protocol}
-                disabled={!!isURLHTTPS}
                 checked={state.protocol === "https"}
                 onCheckedChange={(value) => {
                   dispatch({
@@ -446,6 +444,14 @@ export default function AddConnectionDialog({
               ></Switch>
               <Label>{t("addConnection.httpConnection.useHttps")}</Label>
             </div>
+            {isHTTPS && state.protocol === "http" && (
+              <p className="text-xs text-amber-600 dark:text-amber-400">
+                {t(
+                  "addConnection.httpConnection.mixedContentWarning",
+                  "This page is loaded over HTTPS. Your browser may block connections to an HTTP node.",
+                )}
+              </p>
+            )}
             <div className="flex items-center gap-2 mt-4">
               <Button
                 variant="subtle"
@@ -589,7 +595,7 @@ export default function AddConnectionDialog({
       state,
       bluetoothSupported,
       serialSupported,
-      isURLHTTPS,
+      isHTTPS,
       handlePickBluetooth,
       handlePickSerial,
       handleTestHttp,

package.json

@@ -43,7 +43,7 @@
     "@typescript/typescript6": "^6.0.2",
     "husky": "^9.1.0",
     "lint-staged": "^17.2.0",
-    "oxfmt": "^0.61.0",
+    "oxfmt": "^0.63.0",
     "oxlint": "^1.75.0",
     "tsdown": "^0.22.14",
     "typescript": "^7.0.2",