feat: add a warning after a failed connection for brave users

clients/web/src/components/errors/connection-failed-error.tsx

@@ -1,3 +1,5 @@
+import { BraveWarning } from "../warnings/brave-warning";
+
 export function ConnectionFailedError() {
   return (
     <>
@@ -10,6 +12,7 @@ export function ConnectionFailedError() {
           Make sure that your app is running and you are trying to reach it on
           the correct ip and port.
         </p>
+        <BraveWarning />
       </div>
     </>
   );

clients/web/src/components/warnings/brave-warning.tsx

@@ -0,0 +1,38 @@
+import { Show, Suspense } from "solid-js";
+
+// The Brave browser exports a navigator function to determine whether we are using it.
+declare global {
+  interface Navigator {
+    brave?: {
+      isBrave: () => Promise<boolean>;
+    };
+  }
+}
+
+export function BraveWarning() {
+  const isBrave = (navigator.brave && navigator.brave.isBrave()) || false;
+
+  return (
+    <Suspense>
+      <Show when={isBrave}>
+        <section class="text-3xl pt-8">
+          <h1 class="text-orange-300 font-semibold text-4xl">
+            Info: We noticed you are using the Brave browser.
+          </h1>
+          <p>
+            Users have reported that requests to{" "}
+            <strong>localhost will be blocked</strong> by the{" "}
+            <strong>Brave browser shield</strong> by default.
+          </p>
+          <p>
+            We have a little section in our docs on how to add an exception to
+            this rule for <strong>devtools.crabnebula.dev</strong>:{" "}
+            <a href="https://docs.crabnebula.dev/devtools/brave-browser">
+              docs.crabnebula.dev/devtools/brave-browser
+            </a>
+          </p>
+        </section>
+      </Show>
+    </Suspense>
+  );
+}